How to use
- 1Pick a color or type it in any format (e.g. #c6f04f, rgb(198 240 79), hsl(…), tomato).
- 2Copy the HEX, RGB, HSL, HSV, CMYK or OKLCH value you need.
- 3Use the 10-step shades and tints palette for UI states and backgrounds.
- 4Explore complementary, analogous and triadic swatches.
Which color format for what
HEX (#RRGGBB) and RGB are the universal web formats. HSL (hue, saturation, lightness) is easier to adjust by hand — change lightness for hover states. HSV/HSB is the model used by design tool pickers. CMYK is for print. OKLCH, supported in all modern browsers, is perceptually uniform: equal lightness values really look equally light across hues, which makes it the best format for building consistent color scales and design tokens in CSS.
A note on CMYK
The CMYK values here use the standard mathematical conversion from RGB. Real print output depends on the printer’s ICC profile, paper and ink, and bright screen colors (vivid greens, blues, neons) often fall outside the CMYK gamut. For brand colors in print, ask your printer for a proof or use the official Pantone/CMYK values from your brand guidelines.
Building a palette
The shades-and-tints row gives you 10 lighter and darker variants of the base color — the same idea as a 50–900 scale in design systems. Complementary colors sit opposite on the color wheel and make strong accents; analogous colors are neighbors and feel calm and cohesive; triadic colors are spaced 120° apart for a vivid, balanced scheme. Always check text/background pairs with the contrast checker.
Frequently asked questions
How do I convert HEX to RGB?
Split the hex into three pairs and convert each from base 16: #c6f04f → c6 = 198, f0 = 240, 4f = 79 → rgb(198, 240, 79). The tool does it instantly.
What does an 8-digit HEX code mean?
The last two digits are alpha (transparency): #00000080 is black at about 50% opacity.
Are RGB and HEX exactly the same color?
Yes. They are two notations for the same sRGB values.
What is OKLCH?
A modern CSS color space (lightness, chroma, hue) designed so that numeric changes match how humans perceive color. Use it as oklch(0.9 0.18 125) in CSS.
Not happy with the results?
Talk to Webin Agency about fast, SEO-friendly websites, e-commerce and Google Ads management.