📘 How to use

🔹 Method 1 — pick color with mouse
Click on the color square "Pick a color" — a color picker will open. Choose any color, all formats update instantly.

🔹 Method 2 — enter a value manually
In the field below you can type a color in one of the supported formats:
#63dca6 (HEX), rgb(99,220,166), hsl(155,65%,63%), cmyk(55%,0%,25%,14%).
Press "Convert" or click outside the field — all other formats will be recalculated.

🔹 What the blocks mean:
Color formats — the same color in different systems (useful for copying into CSS, Photoshop).
Shades and tints — 11 variations from black (0% lightness) to white (100% lightness). Click on any shade — it becomes the main color.
Contrast (WCAG) — shows how well white or black text reads on the selected background. Green "AA" or "AAA" means good readability for normal or large text.

💡 Tip: If you need a color for a website, check contrast with white or black text. Recommended ratio is at least 4.5:1 for normal text.

🎨 Pick a color
Or enter a value:
Color formats
Shades and tints
⬅️ Click any square — pick that shade
♿ Contrast (WCAG)
✅ AA — minimum level for normal text (4.5:1). AAA — enhanced (7:1).