Color Converter
Bi-directional conversion across web and print color spaces, WCAG 2.1 relative luminance auditing, and design token scales.
rgb(102, 126, 234) • hsl(229°, 76%, 66%) • 100% Alpha
Adjust Channels
Converted Color Formats (Instant Copy)
13 formats available#667EEA
Standard web hex code (Uppercase)
#667EEA
Hexadecimal with 8-bit alpha (100%)
rgb(102, 126, 234)
Red, Green, Blue integer components [0–255]
rgba(102, 126, 234, 1)
Standard CSS RGBA color format with alpha
rgb(102 126 234 / 100%)
Modern space-separated CSS Color Module 4 syntax
hsl(229, 76%, 66%)
Hue (0-360°), Saturation (0-100%), Lightness (0-100%)
hsla(229, 76%, 66%, 1)
CSS HSLA format with alpha channel transparency
hsv(229°, 56%, 92%)
Hue, Saturation, Value (common in Figma & Photoshop)
cmyk(56%, 46%, 0%, 8%)
Cyan, Magenta, Yellow, Key/Black print model
~cornflowerblue (#6495ed)
Closest match (Delta: 23)
--color-primary: #667eea;
Ready-to-use CSS variable declaration
bg-[#667eea] text-[#667eea]
Tailwind arbitrary value background class
Color(0xFF667EEA)
Flutter/Dart and Android Native Color integer
Operational Workflow
- Input or Sample: Type a color into the HEX field (e.g. #6366f1), input numeric values for RGB or HSL, use the native color picker, or trigger the eyedropper to sample any pixel from your display.
- Fine-Tune Channels: Adjust individual Red, Green, Blue, Hue, Saturation, Lightness, or Alpha transparency sliders to evaluate intermediate chromatic variations.
- Extract Production Code: Copy synchronized formats from the output cards, including 6/8-digit HEX, legacy rgba/hsla, modern CSS Color 4 space-separated syntax, HSV, CMYK, and nearest CSS keywords.
- Audit Accessibility: Switch to the WCAG Contrast tab to test foreground and background combinations against official AA and AAA readability thresholds for normal text, large headings, and interface components.
- Build Design Scales: Access the Tints & Shades tab to generate a 10-step lightness ramp for UI states, or review the Color Harmonies tab for complementary, triadic, and analogous palettes.
Color Space Specifications & Channel Formats
Different display hardware, rendering pipelines, and graphic design tools represent color using distinct geometric models and quantization bounds:
| Format | Formal Syntax | Channel Boundaries | Coordinate Basis | Primary Engineering Domain |
|---|---|---|---|---|
| HEX (#RGB / #RRGGBB) | #6366F1 or #6366F1CC | R, G, B: 00–FF (0–255) · Alpha: 00–FF | sRGB 8-bit integer channel encoding | Standard web stylesheets, design tokens, Figma, compact serialization |
| RGB / RGBA (Legacy) | rgba(99, 102, 241, 0.85) | R, G, B: 0–255 · Alpha: 0.0–1.0 | Additive trichromatic display primaries | Canvas 2D context, WebGL pixel buffers, CSS Level 3 declarations |
| HSL / HSLA (Legacy) | hsla(239, 84%, 67%, 0.85) | H: 0–360° · S: 0–100% · L: 0–100% · A: 0.0–1.0 | Cylindrical bi-cone coordinate projection | Human-controlled palette adjustments, programmatic lightness shifting |
| CSS Color 4 (Modern) | rgb(99 102 241 / 85%) or hsl(239deg 84% 67% / 85%) | Space-separated channels with slash-delimited alpha | W3C CSS Color Module Level 4 unified syntax | Modern stylesheets, dynamic CSS custom property compositions |
| HSV / HSB | hsv(239°, 59%, 95%) | H: 0–360° · S: 0–100% · V: 0–100% | Cylindrical single-cone color space | Digital painting tools, Adobe Photoshop, Illustrator color pickers |
| CMYK (Subtractive) | device-cmyk(59% 58% 0% 5%) | C, M, Y, K: 0–100% | Subtractive 4-color process screen approximation | Print prepress planning, physical packaging, offset color estimation |
| W3C Named Colors | indigo, slateblue, tomato | 148 predefined standard keyword aliases | W3C SVG 1.0 / CSS Color Module Level 3 dictionary | Rapid prototyping, SVG graphics, semantic inline test styling |
How Color Conversion Works: Practical Step-by-Step Logic
Instead of memorizing abstract mathematical formulas, understand how color data transforms between formats through intuitive steps:
1. HEX to RGB: Slice & Convert Pairs
Base-16 to Base-10Every 6-digit hex code splits neatly into three 2-character pairs for Red, Green, and Blue. Take #6366F1 as an example:
For 8-digit hex (#6366F1CC), the trailing CC represents 204. Dividing 204 by 255 gives 0.80 (80% opacity), yielding rgba(99, 102, 241, 0.8).
2. HSL: The Human-Intuitive Color Wheel
Hue, Sat, LightWhile RGB controls screen hardware subpixels, HSL matches how designers reason about palettes:
- Hue (0–360°): Position on the color wheel. 0° is Red, 120° is Green, 240° is Blue. Rotate the angle to change color family without altering intensity.
- Saturation (0–100%): 0% is completely grayscale, 100% is rich, vivid color.
- Lightness (0–100%): 0% is pure black, 50% is standard color, 100% is pure white.
Practical UI trick: To build a button hover state, simply increase Lightness by 10% (66% → 76%). No need to guess three RGB numbers.
3. Why Human Eyes See Green Brighter Than Blue
Perceived LuminanceHuman eyes do not perceive all colors at equal brightness. Our retinas are biologically tuned to green wavelengths:
This explains why white text on bright yellow-green is nearly unreadable (fails contrast), whereas white text on pure blue looks crisp and sharp. WCAG accessibility calculations use this exact biological weighting to measure real readability.
4. Screen RGB vs. Print CMYK: Why Colors Shift
Light vs InkThe shift between digital displays and printed materials comes down to the physics of light:
- Screens (RGB Additive): Pixels emit light. Combining Red, Green, and Blue at full power creates blinding white light.
- Print (CMYK Subtractive): Paper reflects ambient light. Layers of Cyan, Magenta, Yellow, and Key Black ink absorb light.
Practical takeaway: Electric neon blues and glowing cyans visible on OLED screens lie outside the CMYK printable color gamut. Converting to CMYK safely pulls them into printable ink bounds.
WCAG 2.1 Contrast Standards & Accessibility Thresholds
The Web Content Accessibility Guidelines (WCAG) measure how clearly text stands out from its background. Higher contrast ratios make content legible under sunlight, on dim monitors, and for users with low vision:
| Compliance Level | Ratio Required | Target User Interface Elements | Specification Directive |
|---|---|---|---|
| WCAG AA Normal Text | 4.5 : 1 | Body copy, article text, table cells, form labels (< 18pt regular, < 14pt bold) | Mandatory minimum for all digital interfaces under ADA, Section 508, and EN 301 549. |
| WCAG AA Large Text | 3.0 : 1 | Headings, hero titles, display typography (>= 18pt / 24px regular, >= 14pt / 18.67px bold) | Reduced requirement due to greater stroke width and optical visual weight. |
| WCAG AA UI Components | 3.0 : 1 | Form input borders, radio/checkbox outlines, button edges, active focus rings, icons | Ensures interactive boundaries and functional iconography remain detectable against backgrounds. |
| WCAG AAA Enhanced Normal | 7.0 : 1 | High-legibility reading text, medical software, government administrative documents | Maximum international legibility standard for users with severe visual impairments. |
| WCAG AAA Enhanced Large | 4.5 : 1 | Headings and large display banners requiring enhanced contrast | Ensures effortless readability across varied ambient lighting environments. |
Semi-Transparent Layers & Alpha Transparency Rule
When text or button backgrounds have partial opacity (e.g. 80% alpha), the underlying surface color bleeds through. Contrast audits must evaluate the final blended color on screen rather than the foreground color alone. If a test fails, the quickest fix is adjusting text Lightness toward 0% (darker) or 100% (lighter).
Design Token Architecture & Production Integration
Modern front-end applications export color tokens as custom properties or utility classes. Below are spec-compliant patterns for styling frameworks and design systems:
/* CSS Color Module Level 4 Syntax */
.badge {
/* 8-digit HEX with 80% alpha channel */
background-color: #6366f1cc;
/* Space-separated RGB with slash alpha */
color: rgb(255 255 255 / 95%);
border: 1px solid rgb(99 102 241 / 0.4);
/* Modern HSL with explicit degree units */
outline-color: hsl(239deg 84% 67% / 0.5);
}/* Design Token Architecture with Dynamic Alpha Channels (tokens.css) */
:root {
/* Store raw channel triplets to allow variable opacity composition */
--color-primary-rgb: 99 102 241;
--color-surface-rgb: 30 41 59;
}
.panel-container {
/* Compose dynamic opacity without altering base design tokens */
background-color: rgb(var(--color-surface-rgb) / 0.85);
border: 1px solid rgb(var(--color-primary-rgb) / 0.3);
box-shadow: 0 4px 24px rgb(var(--color-primary-rgb) / 0.15);
}/* CSS Color 4 Relative Color Syntax */
:root {
--brand: #6366f1;
}
.button-hover {
/* Adjust lightness dynamically (+10%) while maintaining original hue and chroma */
background-color: hsl(from var(--brand) h s calc(l + 10%));
}
.button-subtle {
/* Override saturation and assign 15% opacity */
background-color: hsl(from var(--brand) h 35% l / 0.15);
}// tailwind.config.js - RGB channel token configuration
module.exports = {
theme: {
extend: {
colors: {
brand: {
500: '#6366f1',
600: '#4f46e5',
// Utility class opacity support: bg-brand-dynamic/80
dynamic: 'rgb(var(--color-primary-rgb) / <alpha-value>)',
},
},
},
},
};Tints, Shades & Harmonic Palettes
Design systems rely on programmatic color ramps and angular wheel rotations to create balanced component states:
Lightness Ramps (Tints vs Shades)
A Tint is calculated by interpolating the base RGB values toward pure white (#FFFFFF), raising lightness. A Shade interpolates values toward pure black (#000000). In UI component libraries, tints (e.g. 50–200) serve as badge backgrounds, hover surfaces, and selection highlights, while shades (700–950) provide high-contrast text and active borders.
Harmonic Angle Rotations
Harmonies are derived by keeping Saturation and Lightness constant while rotating the Hue coordinate H around the 360-degree color circle:
- Complementary: Opposite pole at
(H + 180°) % 360 - Analogous: Adjacent neighbors at
(H ± 30°) % 360 - Triadic: Equilateral triangle at
(H + 120°) % 360and(H + 240°) % 360 - Tetradic: Rectangular harmony at offsets of +90°, +180°, and +270°
UI Palette Benchmark Values
Benchmark reference values for common web and brand design system colors, listing measured photometric relative luminance and contrast performance:
| Swatch | Token Name | HEX | RGB | HSL | Rel. Luminance | Against #FFFFFF | Against #000000 |
|---|---|---|---|---|---|---|---|
| Tailwind Indigo | #6366F1 | rgb(99, 102, 241) | hsl(239, 84%, 67%) | 0.181 | 4.88:1 (AA) | 4.30:1 (UI) | |
| Emerald Green | #10B981 | rgb(16, 185, 129) | hsl(160, 84%, 39%) | 0.363 | 2.54:1 (Fail) | 8.26:1 (AAA) | |
| Rose Crimson | #F43F5E | rgb(244, 63, 94) | hsl(350, 89%, 60%) | 0.245 | 3.56:1 (Large) | 5.90:1 (AA) | |
| Amber Gold | #F59E0B | rgb(245, 158, 11) | hsl(38, 92%, 50%) | 0.443 | 2.13:1 (Fail) | 9.86:1 (AAA) | |
| Sky Blue | #0EA5E9 | rgb(14, 165, 233) | hsl(199, 89%, 48%) | 0.339 | 2.70:1 (Fail) | 7.78:1 (AAA) | |
| Slate 800 | #1E293B | rgb(30, 41, 59) | hsl(217, 33%, 17%) | 0.024 | 14.18:1 (AAA) | 1.48:1 (Fail) | |
| Pure White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) | 1.000 | 1.00:1 (Fail) | 21.00:1 (AAA) | |
| Pure Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) | 0.000 | 21.00:1 (AAA) | 1.00:1 (Fail) |
Frequently Asked Questions
How do I convert a HEX color code to RGB or RGBA?
A 6-digit HEX color (#RRGGBB) consists of three two-digit hexadecimal pairs representing Red, Green, and Blue. To convert to RGB, parse each base-16 pair into a base-10 integer from 0 to 255 (e.g., #6366F1: 63 hex = 99 dec, 66 hex = 102 dec, F1 hex = 241 dec -> rgb(99, 102, 241)). For 3-digit shorthand (#RGB), duplicate each character (#F09 -> #FF0099). For 8-digit HEX (#RRGGBBAA), divide the fourth byte by 255 to compute the alpha decimal value (e.g., CC hex = 204 dec -> 204 / 255 = 0.8 -> rgba(99, 102, 241, 0.8)).
Why do developers prefer HSL over RGB for design systems?
RGB is an additive hardware model based on display subpixels, making it difficult to adjust brightness or saturation without altering the underlying hue across all three channels. HSL (Hue, Saturation, Lightness) separates the chromatic color wheel angle (0–360°) from saturation and lightness. This allows developers to programmatically generate 50–950 color steps, hover states, border highlights, and dark mode variations simply by modifying the Lightness percentage while preserving brand hue.
What is the difference between HSL and HSV (HSB) in design tools vs CSS?
Both models project RGB into cylindrical coordinates, but they define brightness differently. In HSL, pure saturated color is positioned at exactly 50% Lightness, while 100% Lightness is always pure white. In HSV/HSB (used in Figma, Sketch, and Adobe Photoshop), 100% Value represents peak intensity of the pure hue, and white only occurs when Saturation drops to 0% at 100% Value. Because CSS natively supports HSL and not HSV/HSB, color coordinates copied from Figma HSB pickers cannot be pasted directly into CSS hsl() without mathematical conversion.
What is the WCAG 2.1 contrast ratio formula and AA/AAA compliance thresholds?
WCAG 2.1 defines contrast ratio as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the darker color, calculated from linearized sRGB channels. The 0.05 constant compensates for ambient light flare. Minimum compliance thresholds: Level AA requires at least 4.5:1 for normal body text (< 18pt or < 14pt bold) and 3.0:1 for large text (>= 18pt or >= 14pt bold) as well as UI components and input borders. Level AAA requires 7.0:1 for normal text and 4.5:1 for large text.
How does CSS Color Module Level 4 slash syntax work, and is it widely supported?
The modern CSS Color 4 syntax replaces comma separators with whitespace and uses a forward slash to declare alpha: rgb(99 102 241 / 80%) or hsl(239deg 84% 67% / 0.8). It accepts alpha as either a decimal (0.8) or percentage (80%), permits explicit angular units (deg, rad, turn) on hue, and eliminates the legacy distinction between rgb() and rgba(). The syntax is supported in 100% of modern browsers (Chrome 65+, Safari 12.1+, Firefox 52+, Edge 79+).
Why do screen RGB colors shift when converted to CMYK for print?
Screen displays emit additive RGB light across a broad spectrum, whereas commercial printing uses subtractive physical CMYK inks on paper. The mathematical formula K = 1 - max(R,G,B) produces an idealized screen estimate. Real-world commercial printing requires device-dependent color management through calibrated ICC profiles (such as GRACoL, SWOP, or FOGRA39) and total area coverage (TAC) ink limits, causing vibrant electric blues and greens that exist outside the printable CMYK gamut to be compressed.
How does 8-digit hexadecimal notation (#RRGGBBAA) handle alpha transparency?
An 8-digit HEX code appends a two-digit hexadecimal byte representing the alpha channel to standard 6-digit RGB (#RRGGBB). The alpha byte ranges from 00 (0% opacity / fully transparent) to FF (100% opacity / fully opaque). The opacity percentage is calculated as alphaDecimal / 255 (e.g., #6366f180 has 80 hex = 128 dec, yielding 128 / 255 = 50.2% opacity). All modern browsers natively support #RRGGBBAA as well as 4-digit shorthand #RGBA.
How does the converter identify the nearest W3C named CSS color?
The engine evaluates all 148 standardized W3C CSS / SVG named color definitions mapped to 3D RGB Cartesian space. For any selected color, it calculates the Euclidean geometric distance d = sqrt((R1 - R2)^2 + (G1 - G2)^2 + (B1 - B2)^2) against every keyword entry. The keyword with the smallest distance value is returned as the nearest match, where a distance of zero indicates an exact match.