Color Code Explorer
Explore and convert color systems, generate palettes, and validate contrast in one local workspace.
Color processing and image extraction run locally in your browser.
Color processing and image extraction run locally in your browser.
Aa
#4F46E5
Approximate: Blue
Practical preview
Body text colored with current selection for quick readability checks.
Color code modification
Color controls
RGB
HSL
HSV / HSB
CMYK (RGB-based approximation)
Color code output
HEX
#4F46E5
RGB
rgb(79, 70, 229)
RGBA
rgba(79, 70, 229, 1)
HSL
hsl(243.4 75.4% 58.6%)
HSLA
hsla(243.4 75.4% 58.6% / 1)
HSV
hsv(243.4 69.4% 89.8%)
HSVA
hsva(243.4 69.4% 89.8% / 1)
CMYK
cmyk(65.5%, 69.4%, 0%, 10.2%) (RGB-based approximation)
Color extract from image
Upload an image and extract dominant colors locally in your browser.
Contrast checker (WCAG 2.x)
Check accessibility contrast ratios for text and background color combinations.
Normal text preview
Large text preview
Link preview
Contrast ratio: 2.84:1
AA Normal (4.5:1): Fail
AA Large (3:1): Fail
AAA Normal (7:1): Fail
AAA Large (4.5:1): Fail
Recent colors (session)
Session-only history of colors you interacted with in this tool.
No recent colors yet.
Use in code
Use these snippets to convert colors, declare CSS variables, pick colors from screen, and extract image colors locally.
Convert HEX to RGB and generate CSS variable
TypeScriptPrimary API
parseInt(hex.slice(...), 16)
Parses HEX channels and emits CSS variable declarations for UI tokens.
const hex = "#4F46E5";
const normalized = hex.replace("#", "");
const r = parseInt(normalized.slice(0, 2), 16);
const g = parseInt(normalized.slice(2, 4), 16);
const b = parseInt(normalized.slice(4, 6), 16);
const css = ":root {\n --color-primary: " + hex + ";\n --color-primary-rgb: rgb(" + r + ", " + g + ", " + b + ");\n}";
console.log(css);Reference: Documentation
How to use
- Pick a base color from HEX/RGB/HSL/HSV/CMYK controls, native picker, or visual picker.
- Inspect synchronized format outputs and copy the developer-ready value you need.
- Generate palettes, shades, tints, harmonies, or extract dominant colors from a local image.
- Use contrast checker results to validate readability before shipping UI colors.
Use cases
- Create design-system tokens for web interfaces.
- Convert between designer-friendly and developer-friendly color models.
- Derive quick palettes and variations from a brand color.
- Check WCAG contrast compliance for text and components.
Limitations and caveats
- CMYK values are RGB-based approximations and are not print-profile accurate.
- Image extraction is optimized for speed and practical dominant colors rather than full color science analysis.
- EyeDropper API availability depends on browser support and permissions.
History
- Early digital graphics systems standardized additive RGB color representation for displays.
- Hexadecimal notation became common in web development through CSS color syntax.
- Design and developer workflows expanded from basic pickers to integrated tools that include harmonies, extraction, and accessibility checks.
Source: W3C CSS Color Module Level 4 路 MDN: EyeDropper API 路 WCAG 2.2 contrast minimum 路 Canvas API
Evolution and improvements
- Modern CSS color tooling evolved from static swatches to interactive browser-native workspaces.
- Client-side APIs now allow local color picking and image-based extraction without server uploads.
- Accessibility requirements made contrast validation a standard part of frontend color selection.
Source: W3C CSS Color Module Level 4 路 MDN: EyeDropper API 路 WCAG 2.2 contrast minimum 路 Canvas API
FAQ
Does this upload colors or images to a server?
No. Color processing and image extraction are handled locally in your browser session.
Why are CMYK values marked as approximation?
Browser tools convert from RGB math and do not apply printer-specific ICC color profiles.
What is the difference between HSV and HSB here?
They are treated as equivalent naming for the same hue, saturation, and value/brightness model.
How should I use contrast results?
Use the ratio and pass/fail status against WCAG thresholds for normal and large text.