Color Converter
Convert any color between HEX, RGB, HSL, HSV, and CMYK instantly. Includes a color picker, named CSS colors, and contrast checker.
Enter a Color
Named CSS Colors
Understanding Color Models
Colours on screens and in print are represented using mathematical models — each with different strengths. Understanding these models helps you choose the right format for web development, graphic design, print production, and accessibility compliance.
Color Models Explained
HEX (#RRGGBB)
The most common colour format in web development. HEX (hexadecimal) uses six characters — two each for Red, Green, and Blue — with values from 00 to FF (0–255 in decimal). For example, #FF0000 is pure red (255 red, 0 green, 0 blue), and #808080 is medium grey. The shorthand #FFF expands to #FFFFFF (white). HEX is compact, widely supported in CSS, and easy to copy-paste between tools. It does not support transparency — use 8-digit HEX (#RRGGBBAA) or RGBA for that.
RGB (Red, Green, Blue)
RGB is an additive colour model — mixing red, green, and blue light at full intensity produces white. Each channel ranges from 0 to 255. This model directly maps to how screens work: every pixel on your monitor is a cluster of red, green, and blue sub-pixels. CSS syntax: rgb(255, 0, 0) for red, or rgba(255, 0, 0, 0.5) for 50% transparent red. RGB is the native format for digital displays, image processing, and canvas rendering.
HSL (Hue, Saturation, Lightness)
HSL represents colours the way humans naturally think about them. Hue is the colour angle on the colour wheel (0° = red, 120° = green, 240° = blue). Saturation (0–100%) controls how vivid the colour is — 0% is grey, 100% is fully saturated. Lightness (0–100%) controls brightness — 0% is black, 50% is the "pure" colour, 100% is white. HSL is especially useful in CSS for creating colour variations: to make a darker shade, just reduce the lightness. To mute a colour, reduce the saturation.
HSV / HSB (Hue, Saturation, Value/Brightness)
HSV (also called HSB) is the colour model used by most design tools including Photoshop, Figma, and Sketch. It is similar to HSL but uses "Value" (brightness) instead of "Lightness." In HSV, 100% value means the colour is at maximum brightness (but not necessarily white — that depends on saturation). Designers prefer HSV because it aligns more closely with how we perceive colour mixing in paint: adding white (reducing saturation) and adding black (reducing value) are separate, intuitive operations.
CMYK (Cyan, Magenta, Yellow, Key/Black)
CMYK is a subtractive colour model used for print production. While screens add light (RGB), printers subtract light by layering inks. Cyan, magenta, and yellow inks theoretically combine to produce black, but in practice the result is a muddy brown — so a separate "Key" (black) ink is added. All values range from 0% to 100%. When designing for print (business cards, brochures, packaging), always work in CMYK to ensure colour accuracy. Note that the CMYK gamut is smaller than RGB — some vibrant screen colours cannot be reproduced in print.
Web Accessibility: Colour Contrast
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable by people with visual impairments, including colour blindness:
| Level | Normal Text | Large Text (18px+ bold) | UI Components |
|---|---|---|---|
| WCAG AA (minimum) | 4.5 : 1 | 3 : 1 | 3 : 1 |
| WCAG AAA (enhanced) | 7 : 1 | 4.5 : 1 | Not defined |
For example, dark grey text (#333333) on a white background has a contrast ratio of 12.6:1, passing both AA and AAA. Light grey text (#AAAAAA) on white has only 2.3:1, failing both levels.
Colour Theory for Designers
- Complementary colours are opposite on the colour wheel (e.g., blue and orange). They create maximum contrast and visual energy — great for call-to-action buttons and highlights.
- Analogous colours are adjacent (e.g., blue, teal, green). They create harmony and are easy on the eye — ideal for backgrounds and gradients.
- Triadic colours are evenly spaced at 120° intervals (e.g., red, yellow, blue). They provide vibrant variety while maintaining balance.
- Monochromatic schemes use variations of a single hue (different saturations and lightness values). They're always cohesive and elegant.
Popular Colour Palettes Reference
| Brand / Standard | Primary Colour | HEX |
|---|---|---|
| Tailwind Indigo | Indigo-600 | #4F46E5 |
| Material Blue | Blue 500 | #2196F3 |
| Bootstrap Primary | Blue | #0D6EFD |
| CSS Named | Coral | #FF7F50 |
| CSS Named | Teal | #008080 |
Frequently Asked Questions — Color Converter
HEX is a 6-character hexadecimal representation of an RGB color — e.g., #4f46e5 means R=79, G=70, B=229. HEX is most commonly used in CSS and HTML for web design. RGB uses three integer values (0–255) for each channel: red, green, and blue. Both represent the same color space — HEX is simply a compact notation for RGB values.
HSL stands for Hue, Saturation, Lightness. Hue is the color angle on a 360° wheel (0=red, 120=green, 240=blue). Saturation is the intensity (0%=grey, 100%=vivid). Lightness is the brightness (0%=black, 50%=pure color, 100%=white). HSL is preferred by designers because it's more intuitive — you can adjust a color's brightness or saturation without changing its hue, making theming and dark mode easier.
CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive color model used in print design. RGB is additive (light-based — used for screens), while CMYK is subtractive (ink-based — used for physical printing). Colors look different in print vs screen because of this difference. When designing for print, always work in CMYK to avoid unexpected color shifts when the file is sent to a printer.
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios for readable text: 4.5:1 for normal text and 3:1 for large text (AA standard), or 7:1 for enhanced (AAA). Low contrast text is hard to read for people with visual impairments. This tool shows your color's contrast ratio against white and black backgrounds so you can ensure your design is accessible to all users.
HSV (Hue, Saturation, Value) is also called HSB (Hue, Saturation, Brightness). Both HSL and HSV use Hue and Saturation, but differ in the third component: HSL's Lightness of 100% always gives white regardless of saturation, while HSV's Value of 100% gives the pure, fully saturated color. HSV is widely used in Photoshop and design software color pickers because it feels more natural for selecting vivid colors.
Figma and Photoshop both display colors in HEX, RGB, and HSL formats. Copy the HEX code (e.g., #3b82f6) directly from the tool and paste it into CSS as-is. For opacity variants, use RGBA in CSS: rgba(59, 130, 246, 0.5). This converter lets you go in any direction — paste a HEX from your design tool and instantly get the RGB or HSL values needed for CSS custom properties or Tailwind config.