AA = 4.5:1 (normal text) · AA LARGE = 3:1 · AAA = 7:1
🔒 No color data is stored — history resets on page refresh.
WHY USE THIS TOOL?
Designers and developers constantly switch between color formats.
CSS wants HEX, Canvas API needs RGB,
and design systems use HSL for intuitive tint/shade control.
This tool converts all three formats simultaneously — pick once, copy in any format.
The built-in WCAG contrast checker shows you whether your text
will meet accessibility standards before you ship. No external libraries,
no data sent to any server.
HOW TO USE
1. Click the color preview square to open your browser's color picker.
2. Or type directly into the HEX, R/G/B, or H/S/L fields — all update in sync.
3. Hit COPY next to any format to copy it to your clipboard.
4. Click a retro palette swatch to jump to that color.
5. Use 🎲 RANDOM to explore unexpected colors.
6. Check the WCAG CONTRAST panel for accessibility ratings.
FREQUENTLY ASKED QUESTIONS
Q: What is the difference between HEX and RGB?
They represent the same data in different bases. HEX uses base-16 notation (#FF5733), while RGB uses base-10 (255, 87, 51). HEX is the standard in CSS and design tools; RGB is common in JavaScript canvas, Python image libraries, and anywhere you need to manipulate individual channels mathematically.
Q: What is HSL and when should I use it?
HSL stands for Hue (0–360°), Saturation (0–100%), and Lightness (0–100%). It describes color in human-intuitive terms. Want a lighter version of a color? Just increase L. Want a less vivid version? Lower S. HSL is ideal for building color systems and theming in CSS custom properties.
Q: How do I check color contrast for accessibility?
WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal-size text (AA level) and 7:1 for enhanced contrast (AAA). Large text (18pt+) only needs 3:1. The contrast checker shows white and black text ratios against your selected color so you can confirm compliance before publishing.
Q: Does this tool save my color history?
No. The Recent Colors section stores colors only in a JavaScript variable for your current session. Nothing is written to localStorage, cookies, or any server. Refreshing the page clears the history completely.
Q: What are the classic Game Boy color hex codes?
The original 1989 Game Boy used four shades of yellow-green on its reflective LCD: #0F380F (darkest), #306230, #8BAC0F, and #9BBC0F (lightest). Click the GAME BOY preset in the Retro Palettes section to use them instantly.