ColrShiftOne color in, every space out
Paste any format — the mixing room converts HEX, RGB, HSL and CMYK in one stroke, proofs WCAG contrast on black and white, and cuts five harmony palettes from the wheel.
Contrast proof — WCAG 2.1
relative luminance · (L1 + 0.05) / (L2 + 0.05)Harmony palettes
click a chip to copy · ↺ to set as baseFour spaces, one truth
Every format describes the same color for a different audience — the web, the screen pipeline, the human eye, the print shop. The mixing room speaks all four so nobody has to translate by hand.
HEX
The web's native dialect. Three or six hexadecimal digits (or eight with alpha) map straight to RGB channels — compact, URL-safe, and what CSS expects.
RGB
Additive light: three channels of red, green and blue, each 0–255, mixing the way screens emit. The natural intermediate — every other format converts through it.
HSL
Human-readable color: hue as a 0–360° wheel position, saturation and lightness as percentages. "Same hue, slightly darker" finally maps to one number changing.
CMYK
Subtractive ink for print: cyan, magenta, yellow and key (black) plates, each a coverage percentage. What a press mixes instead of light.
Accessibility, proven on the spot
A color is only as accessible as the text it carries. WCAG 2.1 defines four thresholds — the mixing room proofs your color against pure white and pure black and stamps every verdict, so you know your pairing before the design review does.
Five cuts of the wheel
Palettes are geometry: relationships between hue positions on the 360° wheel. The mixing room derives all five classic schemes from your color at once — click any chip to copy, or ↺ to make it the new base.
Complementary
Directly opposite on the wheel. Maximum hue contrast — the pairing behind every "accent color" decision.
Split-complementary
The complement's two neighbors. Same punch as complementary, but softened — easier to balance in a layout.
Triadic
Three hues evenly spaced around the wheel. Vibrant yet balanced — the classic playground of poster design.
Analogous
Next-door neighbors on the wheel. Low tension, high cohesion — the quiet scheme of nature and editorial design.
Monochromatic
One hue, five lightness steps — a paint-store strip. The safest way to build depth without new hues.
Built for the moment specifications arrive
Designers and developers frequently receive brand colors in a single format — a hex code in a PDF, an RGB value pasted into Slack, a CMYK breakdown from a print vendor. colrshift takes that one input and outputs every representation you need without manual conversion math. Paste a hex, click one of the preset buttons like #4a90d9 or dodgerblue, or type a raw value in any supported space. The tool immediately returns HEX, RGB, HSL, and CMYK side by side, plus a live WCAG 2.1 contrast check so you can verify text legibility before leaving the page.
From one value to four formats
- Paste a color value or click a preset button like #0f8f7e to populate all fields instantly.
- Review the converted outputs across HEX, RGB, HSL, and CMYK panels displayed below the input.
- Click Random to generate a new color, or Clear to reset every field and start over.
- Check the WCAG contrast section to confirm whether your color meets accessibility thresholds for text.
- Copy any converted value directly from its panel for use in your stylesheet or design file.
Frequently asked
The questions designers, developers and auditors bring to the mixing counter.
How do I convert HEX to RGB?
Paste the hex code — with or without the # — into the input box, e.g. #4a90d9. The format is detected automatically and the RGB result appears instantly: rgb(74, 144, 217). Each channel is simply the hexadecimal pair converted to decimal: 4a = 74, 90 = 144, d9 = 217. Click any value card to copy it.
How do I convert RGB to HSL?
Enter the color as rgb(74, 144, 217), rgba(...), or a bare triple like 74 144 217. HSL is derived from the max and min channel: lightness is their midpoint, saturation is their difference scaled by lightness, and hue is the 0–360° position of the dominant channel on the color wheel — here hsl(211, 65%, 57%).
What is CMYK for, versus RGB?
RGB is additive — red, green and blue light mix on screens. CMYK is subtractive — cyan, magenta, yellow and black ink absorb light on paper. Designers hand HEX to developers for the web but need CMYK percentages for print shops. ColrShift converts with the standard ink model: k = 1 − max(r,g,b), then c, m, y are the remaining separations.
What contrast ratio do I need for WCAG AA and AAA?
WCAG 2.1 requires 4.5:1 for AA normal text, 3:1 for AA large text (18pt+ or 14pt bold), 7:1 for AAA normal text and 4.5:1 for AAA large text. ColrShift checks your color against both black and white and shows pass/fail badges for all four thresholds in one glance.
How is the WCAG contrast ratio calculated?
Each color's relative luminance is computed by linearizing the sRGB channels and weighting them 0.2126 R + 0.7152 G + 0.0722 B. The ratio is (L1 + 0.05) / (L2 + 0.05) with L1 the lighter color, ranging from 1:1 to 21:1. The tool also shows perceived brightness using the ITU-R BT.601 luma weights 0.299 / 0.587 / 0.114.
What are complementary, split-complementary and triadic colors?
Hue-wheel relationships. Complementary sits opposite at H+180° for maximum contrast. Split-complementary takes the two neighbors of that opposite point at H±150° — similar punch, less tension. Triadic places three colors evenly at H±120°. Analogous neighbors (H±30°) and a monochromatic lightness strip round out the five schemes.
Can I use CSS color names like dodgerblue?
Yes — all 148 named CSS colors are recognized, from aliceblue to yellowgreen, including rebeccapurple, resolved through the same named-color table your browser uses. Type a name and every other format updates instantly; conversely, a hex value reveals its matching CSS name if one exists.
Is my input uploaded to a server?
No. All parsing, conversion and palette generation runs entirely in your browser. Nothing you type is transmitted, logged or stored — safe for unreleased brand palettes and NDA-covered work. Colors are also encoded in the page URL, so bookmarking or sharing a color needs no server at all.
Every colour, already converted
Each page holds one colour in HEX, RGB, HSL and CMYK side by side, with the WCAG contrast against black and white so you know where it can be used as text.