Color Converter
Type a color in any format — HEX, RGB, HSL, OKLCH, a CSS name — and get it in eleven others, with a picker, a ready-made tint scale and matching harmonies.
- 11 formats
- Color picker
- Tint scale
- Instant
Type any CSS color: #06B6D4, rgb(6 182 212), hsl(189 94% 43%), oklch(0.71 0.13 215), a color name …
This color is outside the sRGB range of ordinary screens. The values below describe the closest color that sRGB can show.
Adjust channels
Tints and shades (50–950)
An 11-step scale around your color, built in OKLCH so the steps look evenly spaced. Your color keeps its exact value in the highlighted step. Click a step to copy it.
Color harmonies
How to convert a color
Any format in, every format out.
- 1
Enter or pick a color
Paste a value such as #06B6D4 or rgb(6 182 212), drag in the picker, or pick from the screen.
- 2
Read all formats
Every notation is listed with its own copy button, in modern or comma syntax.
- 3
Go further
Fine-tune with RGB, HSL or OKLCH sliders, copy a full tint scale or open the color in the contrast checker.
Made for modern CSS
Including the color spaces of CSS Color Level 4.
Understands what you paste
HEX with 3, 4, 6 or 8 digits, rgb() and hsl() in old and new syntax, hwb(), lab(), lch(), oklab(), oklch(), color(display-p3 …), CSS names and plain “255, 0, 128”.
OKLCH included
The perceptual color space behind modern design systems, with gamut mapping when a color cannot be shown in sRGB.
Channel sliders
Adjust one channel at a time in RGB, HSL or OKLCH and watch all values follow.
Tints and shades
An evenly stepped 50–950 scale around your color, ready to copy as CSS variables or a Tailwind config.
Harmonies
Complementary, analogous, triadic, split-complementary and tetradic partners, one click to copy.
Opacity aware
Alpha is kept through all conversions: 8-digit HEX, rgb() and hsl() with a slash value.
Shareable link
Copy a link that opens the tool with the same content. The data sits in the part of the address after #, which browsers do not send to servers.
Private by design
Everything runs in your browser. What you type or open is not sent to a server.
Color formats and when to use which
On screens, every color is a mix of red, green and blue light. HEX (#06B6D4) and RGB write those three channels directly, from 00 to FF or 0 to 255. They are compact and universal, but hard to reason about: you cannot tell from the numbers how to make a color a little lighter or less saturated.
HSL rearranges the same colors into hue (0–360° on the color wheel), saturation and lightness, which is easier to adjust by hand. Its weakness is that “lightness” is not what the eye sees: yellow and blue at 50 % lightness look nothing alike in brightness. OKLCH fixes that. Its lightness matches perception, so stepping L evenly gives an evenly stepped scale, and changing the hue keeps the apparent brightness — the reason design systems and CSS itself are moving to it.
CMYK describes ink for printing, not light. A screen value has no single correct CMYK equivalent — the result depends on printer, ink and paper, described by an ICC profile. The percentages here are the simple device conversion that design tools show as a first estimate; for accurate print colors, convert with your print shop’s profile.
The same color in different notations
| Format | Example | Best for |
|---|---|---|
| HEX | #06B6D4 | CSS, design tools, sharing a color |
| RGB | rgb(6 182 212) | CSS with opacity, canvas, image code |
| HSL | hsl(189 94% 43%) | Adjusting hue or saturation by hand |
| OKLCH | oklch(0.715 0.126 215) | Color scales, modern design systems |
| CMYK | cmyk(97%, 14%, 0%, 17%) | A first estimate for print |
Tips
- Check whether text in this color is readable with the Contrast Checker.
- Build a full scheme around it in the Palette Generator.
- Blend it into another color with the Gradient Generator.
- Read a color from a screenshot or photo with the Pixel Picker.
Frequently asked questions
Can’t find your answer? Contact us — we reply quickly.
How do I convert HEX to RGB?
Split the six digits into three pairs and convert each from hexadecimal to decimal: #06B6D4 is 06 → 6, B6 → 182, D4 → 212, so rgb(6 182 212). The converter does this — and the way back — instantly.
What is OKLCH and why use it?
OKLCH describes a color by perceived lightness, chroma (colorfulness) and hue. Unlike HSL, equal steps look equal to the eye, which makes it far better for building color scales. All current browsers support it in CSS.
Why are the CMYK values different from Photoshop’s?
Photoshop converts with an ICC color profile for a specific printing condition. This tool uses the simple profile-free formula, so the numbers differ. Use your print provider’s profile for final artwork.
What does an 8-digit HEX code mean?
The last two digits are the opacity: #06B6D480 is the color #06B6D4 at 50 % alpha. Four-digit codes are the short form.
What does “outside sRGB” mean?
Formats such as OKLCH and Display P3 can describe colors more vivid than a standard sRGB screen can show. The converter then displays the closest sRGB color and tells you.
Is my data sent to a server?
No. The tool runs entirely in your browser. Your input is not uploaded, logged or stored on our servers.
More free developer tools
Encode, format, test, convert and generate — small tools that run in your browser and keep your data on your device.