Design Studio · 37 tools
Color Tools
37 free colour tools: picker, HEX/RGB/HSL/OKLCH converter, WCAG contrast checker, palettes, shades and colour-blindness simulator.
Part of Design Studio.
Start here
-
Color Picker
Pick colors visually and get HEX, RGB, HSL, HSV, CMYK values
-
Color Format Converter
Convert between HEX, RGB, HSL, HSV, CMYK, LAB and CSS names
-
Color Contrast Checker
Check WCAG AA/AAA contrast ratios for text and backgrounds
-
CMYK ↔ RGB Converter
Convert print CMYK percentages to RGB / HEX and back both ways
-
Gradient Color Steps
Generate N evenly-spaced colors between two endpoints
-
HEX to RGBA Converter
Convert HEX colors to rgba() with custom alpha / opacity
-
Image Color Extractor
Upload an image to extract its dominant color palette
All color tools
-
CMYK ↔ RGB Converter
Convert print CMYK percentages to RGB / HEX and back both ways
-
Color Contrast Checker
Check WCAG AA/AAA contrast ratios for text and backgrounds
-
Color Format Converter
Convert between HEX, RGB, HSL, HSV, CMYK, LAB and CSS names
-
Color Picker
Pick colors visually and get HEX, RGB, HSL, HSV, CMYK values
-
Gradient Color Steps
Generate N evenly-spaced colors between two endpoints
-
HEX to RGBA Converter
Convert HEX colors to rgba() with custom alpha / opacity
-
Image Color Extractor
Upload an image to extract its dominant color palette
-
Random Palette Generator
Generate beautiful random color palettes with one click
-
Alpha Blend Calculator
Composite a translucent color over a background to a solid hex
-
Color Blend Mode Calculator
Compute multiply, screen, overlay and more blend results of 2 colors
-
Color Blindness Simulator
Simulate how your palette looks with different color blindness
-
Color Distance Calculator
Measure perceptual color difference using the ΔECIEDE2000 metric
-
Color Harmonies
Generate complementary, triadic and analogous palettes
-
Color Inverter
Invert any color to its RGB negative (255 minus each channel)
-
Color Mixer
Blend two colors with a ratio slider and preview the mix
-
Color Name Finder
Find the nearest CSS named color for any hex value
-
Color Opacity / RGBA
Add alpha transparency to any color and get rgba() values
-
Color Palette Sorter
Sort a list of hex colors by hue, saturation, or lightness
-
Color Temperature Tool
Visualize warm/cool color temperature and generate palettes
-
Complementary Color Finder
Find the exact complementary (opposite) color for any hex value
-
Contrast Grid Checker
Check WCAG contrast for every foreground/background pair in a palette at once
-
CSS Color Names Reference
Complete table of all 148 CSS named colors with hex values
-
CSS color-mix() Generator
Build a CSS color-mix() in srgb and preview the computed result
-
Grayscale Converter
Convert any color to perceptual grayscale using Rec.601 luma
-
HEX Shorthand Expander
Expand 3-digit hex to 6-digit and shorten collapsible hex codes
-
HSL Adjuster
Shift hue, saturation and lightness of a color with live preview
-
Lighten / Darken Color
Lighten or darken any color by a precise percentage of lightness
-
Material Tonal Palette
Generate a 50–900 tonal scale from one base color for design systems
-
Nearest Tailwind Color
Find the closest Tailwind CSS color name and shade for any hex
-
OKLCH Color Converter
Convert HEX/RGB to and from OKLCH and OKLab (CSS Color 4)
-
Pastel Color Generator
Turn any bold color into a soft pastel version instantly
-
RGB Percentage Converter
Convert HEX to percentage rgb(), 0–1 float and 8-bit integer forms
-
Sepia Tone Converter
Apply the classic sepia photo tone matrix to any color
-
Tailwind Color Finder
Browse and copy the complete Tailwind CSS color palette
-
Tints & Shades Generator
Generate a complete range of tints and shades from any color
-
UI Color Scheme Builder
Build a complete UI color scheme with semantic role assignment
-
WCAG Color Compliance
Test all WCAG 2.1 text size requirements with pass/fail badges
No tools match. Try another word, or .
About Color Tools
This category has 37 tools for choosing, converting and checking colours. The Color Picker shows HEX, RGB, HSL, HSV and CMYK values together, the Color Converter moves between HEX, RGB, HSL, HSV, CMYK, LAB and CSS names, and the Color Contrast Checker tells you whether text passes WCAG AA or AAA. Palette tools build harmonies, shades, tints and Material-style scales, and Nearest Tailwind Color finds the closest Tailwind shade for any hex value.
The maths follows CSS Color 4, so modern formats such as OKLCH, LAB and display-p3 are read correctly, and out-of-gamut colours are mapped into sRGB the way browsers do it. Colour difference uses CIEDE2000, and the Color Blindness Simulator applies published simulation matrices for the main types of colour vision deficiency. Results are copied as ready-to-paste CSS values.
Frequently asked questions
What contrast ratio do I need for body text?
Why does CMYK not match my printer?
Can I pick a colour from an image?
Other studios
- PDF StudioMerge, compress, sign and convert PDFs on your device.
- Image StudioResize, compress, convert and clean up images privately.
- Media StudioTrim, convert and record video and audio in the browser.
- Money StudioLoans, savings, tax and seller fees, with the maths shown.
- Health StudioCalories, BMI, heart-rate zones and sleep, explained.
- Calc & Convert StudioMaths, units, dates and everyday sums, exact to the digit.
- Developer StudioFormat, validate, convert and decode — locally, instantly.
- Writing StudioCount, clean, transform and draft text without distractions.
- Office & Business StudioInvoices, documents, charts and policies, tidy and fast.
- Study StudioFlashcards, citations, quizzes and revision timers.
- Security StudioPasswords, hashes and ciphers generated on your device.
- Fun StudioWheels, dice, pickers and fancy text for when chance decides.