Skip to content
ToolBoxGenie

Color Converter

Converters ยท Added 18 August 2026

Paste a colour in whatever notation you have it in โ€” a hex code from a design file, an rgb() from a stylesheet, an hsv() from a colour picker, a cmyk() from a print spec โ€” and every other notation appears at once, along with the decimal and float forms that native and graphics code use. The nearest CSS colour name is named honestly, as an exact match or merely the closest one.

hex, rgb(), rgba(), hsl(), hsv(), hsb(), cmyk() or a CSS colour name.

Conversions

Hex

#1d4ed8

Nearest CSS colour name: royalblue (#4169e1) โ€” close, not identical.

Every notation

Hex
#1d4ed8
RGB
rgb(29, 78, 216)
RGB (modern CSS)
rgb(29 78 216)
HSL
hsl(224, 76%, 48%)
HSV / HSB
hsv(224, 87%, 85%)
CMYK
cmyk(87%, 64%, 0%, 15%)
Decimal
1920728
Float (0โ€“1)
0.1137, 0.3059, 0.8471
Red
29

11%

Green
78

31%

Blue
216

85%

Hue
224ยฐ

Shared by HSL and HSV

HSL saturation / lightness
76% / 48%
HSV saturation / value
87% / 85%

Not interchangeable with HSL

Alpha
Opaque
Key (black)
15%

CMYK ink coverage

Hue relationships

The same colour with its hue rotated, holding saturation and lightness steady. These are positions on the hue wheel, not a recommendation โ€” whether a pair works depends on how much of each you use and what sits between them.

Complementary

#1d4ed8

#d8a71d

Opposite hues. Maximum separation, which is why it reads as emphasis rather than as a palette.

Analogous

#1dacd8

#1d4ed8

#491dd8

Neighbouring hues. Low contrast between them, so they sit together without competing.

Triadic

#1d4ed8

#d81d4e

#4ed81d

Three evenly spaced hues. Balanced, and usually needs one to dominate.

Split complementary

#1d4ed8

#d8491d

#acd81d

The complement, split in two. Keeps the contrast and softens the clash.

HSL and HSV share a hue and nothing else โ€” 50% HSL lightness is 100% HSV value for a pure hue, so the two sets of numbers are not interchangeable. The CMYK figures are the standard arithmetic conversion, which is what image editors and CSS tools use; they are not a print prediction, because real print output depends on an ICC profile for a specific press, paper and ink set.

How to use the color converter

  1. 1Type or paste a colour: hex, rgb(), rgba(), hsl(), hsv(), hsb(), cmyk() or a CSS colour name. The picker beside the field works too.
  2. 2Read the conversions. Each row is a complete value you can paste straight into a stylesheet, a design tool or source code.
  3. 3Use the copy button on any row, or the hex button at the top for the value on its own.
  4. 4Check the hue relationships below the numbers if you need variations of the same colour rather than the colour itself.

Examples

A hex code from a design file

Input
#1d4ed8
Result
rgb(29, 78, 216) - hsl(224, 76%, 48%) - hsv(224, 87%, 85%) - cmyk(87%, 64%, 0%, 15%)

An HSV value from a colour picker

Input
hsv(210, 80%, 90%)
Result
#2e79e5 - rgb(46, 121, 229)

CSS has no hsv() function, which is why a value copied out of a picker has to be converted before it can be used.

A translucent colour

Input
rgba(0, 0, 0, 0.5)
Result
#00000080 with the alpha kept, and rgb(0 0 0 / 0.5) in modern CSS syntax

About the color converter

Why one colour needs five notations

Each notation exists because it makes a different job easy. Hex is compact and unambiguous, which is why stylesheets and design files use it. RGB matches how a screen actually emits light. HSL and HSV are the ones you can reason about โ€” to make a colour lighter you change one number, rather than guessing at three. CMYK describes ink on paper, where colour is subtractive rather than additive.

None of them is more correct than the others, and all of them here describe the same three channels. What matters is that the conversion between them is exact in one direction and rounded in the other: hex to RGB is lossless, while HSL and HSV round to whole degrees and percentages, so converting out and back can move a channel by a value or two.

Additive and subtractive colour

A screen starts black and adds light: red, green and blue at full strength give white. Ink starts with white paper and subtracts light: cyan, magenta and yellow together should give black and in practice give a muddy brown, which is why printing adds a separate black ink โ€” the K in CMYK, for key.

This is why the gamuts do not line up. A saturated screen blue or a bright green has no ink equivalent, and a conversion can only produce the closest printable approximation. It is also why a design that looks right on a monitor can look flat in print, and why print work is proofed rather than trusted to a conversion.

Reading a hex code

Six digits are three pairs, each a channel from 00 to ff, which is 0 to 255 in decimal. Once you can see the pairs, a code stops being opaque: equal pairs are always a neutral grey, a high first pair with low others is a red, and adding the same amount to all three lightens without shifting the hue.

The three-digit shorthand doubles each digit, so #1a2 means #11aa22 rather than anything more subtle. That is worth knowing because it limits the shorthand to 4,096 of the 16.7 million possible colours โ€” fine for a quick sketch, and a reason not to convert a real value into it.

Frequently asked questions

What is the difference between HSL and HSV?
They share a hue angle and disagree about everything else. In HSL, 50% lightness is the pure hue and 100% is white; in HSV, 100% value is the pure hue and there is no white without dropping saturation. So the same colour has different saturation numbers in each, and pasting an HSV saturation into an hsl() function produces a plausible-looking colour that is not the one you had. Both are shown here in full for that reason.
Will the CMYK values match what my printer produces?
No, and no web tool can promise otherwise. These are the standard arithmetic conversion, which is what CSS tools and image editors use and what is reversible back to the same RGB. Actual print output goes through an ICC profile for a specific press, paper stock and ink set, and a colour-managed workflow will give different numbers. Use these as a starting point and let the print shop convert properly.
Why does the hex value sometimes have eight digits?
The last two digits are the alpha channel, from 00 for fully transparent to ff for fully opaque. Eight-digit hex is supported in every current browser and is the compact way of writing what rgba() spells out. When a colour is fully opaque, the alpha pair is dropped because it adds nothing.
Is the nearest colour name the same colour?
Only when the tool says it is exact. CSS has 148 named colours, and an arbitrary hex value almost never lands on one of them, so the name is offered as the closest match by RGB distance rather than as an equivalent. Substituting the name for the value will change the colour slightly unless the match is exact.
What are the decimal and float rows for?
The decimal value is the colour packed into a single 24-bit integer, which is the form Java, .NET and various APIs take. The float triple is the same colour with each channel scaled to 0 to 1, which is what OpenGL, iOS and Android APIs expect. Both are conversions of the same three channels, listed so you do not have to do the arithmetic in your head.
Do the hue relationships tell me which colours to use?
No. They are geometry: the same colour with its hue rotated by a fixed number of degrees, holding saturation and lightness constant. That produces sets that are related in a predictable way, which is useful as a starting point, but whether a pair works in a layout depends on proportion, context and what sits between them. Nothing here can judge that.

Related tools