Convert one colour between HEX, RGB, HSL, HSV, and CMYK with copyable CSS output, CSS custom property handoff, and black-versus-white contrast guidance.
Last updated
Design
Color Converter
Move a color between HEX, RGB, HSL, HSV, and CMYK representations for web and print workflows.
Input mode
Preset colours
Result
#0f766e
HEX input normalized to HEX, RGB, HSL, HSV, and CMYK for web and print usage.
Preview
Use the preset chips or switch modes to check the same color in different workflows.
CSS handoff
Copy the most common CSS-ready values without reformatting the result by hand.
HEX
#0f766e
RGB
rgb(15, 118, 110)
HSL
hsl(175, 77%, 26%)
CSS variable
--color-swatch: #0f766e;
HEX
#0f766e
RGB
15, 118, 110
HSL
175°, 77%, 26%
HSV
175°, 87%, 46%
CMYK
87.29%, 0%, 6.78%, 53.73%
Contrast quick check
For text on this color, white is the stronger starting contrast choice. Confirm final accessibility in the actual UI size and font weight.
White text ratio
5.47:1
Black text ratio
3.84:1
Suggested text
#ffffff
Workflow notes
HEX and RGB are the fastest paths for screens. HSL and HSV are useful when you want to shift hue or
saturation. CMYK is a print approximation that should still be checked against the printer profile.
Color converter: HEX, RGB, HSL, HSV, CMYK, CSS output, and contrast guidance
A color converter helps you keep one visual colour consistent while different tools describe it in different ways. This page also explains the main assumptions behind the color converter result, highlights the supporting figures shown by the calculator, and helps the reader use the estimate without overstating what a quick online tool can prove.
Why one color needs multiple formats
HEX and RGB describe additive screen colour. HSL and HSV reorganise the same underlying colour into controls that feel more intuitive when you are nudging hue, saturation, lightness, or value. CMYK is a subtractive ink model used as a print reference rather than a direct screen description.
That means the same colour can be validly written in several ways at once. A good converter does not create a new colour. It normalises one colour so every downstream tool sees an equivalent representation, then exposes the CSS-ready forms designers and developers most often need to copy.
How the formats connect
HEX is shorthand for the three RGB channels written in base-16 pairs. HSL and HSV are transformations of RGB rather than independent colour systems. CMYK begins from the same visible colour goal, but it expresses how much cyan, magenta, yellow, and black ink would be used in a process-colour workflow.
Because those formats emphasize different parts of the workflow, it is common to pick a colour in one format and then validate or communicate it in another. This converter accepts HEX, RGB, HSL, HSV, or CMYK input, rejects out-of-range channel values instead of silently clamping them, and returns a complete conversion sheet.
HEX = #RRGGBB
A six-digit hex code stores the red, green, and blue channels as hexadecimal pairs.
K = 1 - max(R', G', B')
A common CMYK conversion starts by finding the black ink component from normalized RGB values.
The contrast quick check compares the converted colour against black and white text using the WCAG-style relative-luminance formula.
Hue = position on a 0° to 360° colour wheel
HSL and HSV represent the same colour by angle plus saturation and brightness-style controls.
What this helps with in practice
Use a colour converter when a developer needs a HEX token from a visual design, when a designer wants the HSL or HSV version of a brand colour for iterative editing, or when a print discussion needs a first-pass CMYK reference from a screen-defined palette.
The CSS handoff block is designed for everyday implementation work. It gives copyable HEX, RGB, HSL, and a CSS custom-property line so a colour can move from a design discussion into a stylesheet or design token file without manual retyping.
Using the contrast quick check
Competitor color converters increasingly combine format conversion with accessibility checks because the same brand colour may be used as a background, button fill, badge, or chart segment. This calculator compares the colour against white and black text and suggests the stronger starting text colour.
That quick check is not a full design review. WCAG contrast depends on the final foreground colour, background colour, text size, font weight, and visual state. Still, seeing whether black or white text is stronger immediately helps prevent obvious handoff mistakes before the colour reaches production UI.
Choosing the right format for the job
For web interfaces, HEX and RGB are the fastest handoff formats because browsers and design tokens can use them directly. HSL is useful when you want a more editable hue-and-lightness view, and CSS Color Module Level 4 also documents broader syntax patterns that modern browsers continue to adopt.
For print, CMYK is useful as a planning reference, but it should still be checked against the printer profile and paper stock. A screen colour can map to more than one print output depending on the press, ink set, and viewing conditions, so the safest workflow is to convert first and then proof the final result.
HEX and RGB for web and UI handoff
HSL for editable CSS colour tokens
HSV for brightness/value-based design adjustments
CMYK for print planning and proofing
Contrast ratios for checking obvious black-or-white text choices
What the converter does not replace
A format converter is not the same as a full colour-management system. It does not apply ICC profiles, simulate a specific printer, calculate spot-colour or Pantone alternatives, or guarantee that a saturated RGB colour is printable in a given CMYK workflow.
It also does not replace a complete accessibility audit. Use the contrast check as a fast screen for black-versus-white text decisions, then verify the real UI with the final foreground and background colours, typography, interaction states, and required WCAG target.
Further reading
MDN — <color> data type — Reference for CSS color formats, including HEX, RGB, HSL, and related syntax.
They describe the same additive screen colour channels. HEX is just a compact way of writing the red, green, and blue values in hexadecimal notation.
Can I convert HEX to RGB with this page?
Yes. Enter a three-digit or six-digit HEX value and the converter returns RGB, HSL, HSV, CMYK, CSS RGB, CSS HSL, a CSS variable line, and contrast guidance.
Can I convert RGB to HEX?
Yes. Switch to RGB mode, enter red, green, and blue channel values from 0 to 255, and the result normalises the colour to HEX plus the other supported formats.
Why do designers use HSL or HSV if RGB already exists?
HSL and HSV are easier to manipulate when you want to change hue, saturation, lightness, or value intentionally. They are editing-friendly views of the same underlying colour rather than separate output systems.
Can CMYK guarantee my print result?
No. CMYK values are planning references. Real print output still depends on press profile, ink set, paper, viewing conditions, and printer calibration.
Why can one colour have several valid values at once?
Because each format expresses the same target colour in a different coordinate system. A converter keeps those systems aligned so handoff stays consistent across tools.
Which format should I use for CSS?
HEX and RGB are the most common CSS-friendly options. Use HSL when you want a more editable hue-and-lightness view, and use a CSS custom property when the colour belongs in a reusable design token.
How do I decide between HSL and HSV?
Both are editing-friendly views of the same RGB colour. HSL is often easier when you think in lightness, while HSV is often easier when you think in brightness or value.
What does the contrast quick check tell me?
It compares the converted colour against white and black text using relative-luminance contrast ratios, then suggests the stronger starting text colour. It is a fast check, not a full accessibility review.
