Free color tools for designers & developers
HTML color codes in every format
Type or pick any color to get Hex, RGB, HSL and OKLCH instantly — then check contrast, build shades and find a palette that fits.
≈ SlateBlue
#5B45F5
5.81:1 on white3.61:1 on black
Studio
Tools for every color task
Pick, convert, check and generate. Every tool runs instantly in your browser.
Color Picker
Pick a color and explore shades and harmonies
Image Picker
Sample exact colors from any image
Color Wheel
Generate harmonious color schemes
Palette Generator
Generate color palettes in one click. Press Space to shuffle, lock the colors you like, check text contrast and export CSS, SCSS, Tailwind or JSON.
Contrast Checker
Check text and background color contrast against WCAG AA and AAA. Preview normal text, large text, buttons, links and dark mode color pairs.
Shades Generator
Generate a 50–900 shade scale from one base color, copy CSS variables, and preview tints, shades and UI-ready color tokens.
Color Blindness Simulator
Simulate protanopia, deuteranopia, tritanopia and achromatopsia for a palette or image, and find color pairs that people with color blindness may confuse.
Image Palette Extractor
Upload a photo or screenshot and extract the dominant Hex colors locally in your browser. Copy a palette for UI design, branding and moodboards.
Complementary Color
Find the complementary (opposite) color of any HEX or RGB color, plus a perceptual OKLCH complement, the inverted color and split complementary and triadic schemes.
Palettes
Start from a palette
Curated four-color palettes for websites, apps and brands. Click a swatch to copy it.
Library
Explore color families
Shades, codes, contrast and usage ideas for the colors people search for most.
Color formats
What are HTML color codes?
Color codes describe colors in a format browsers can read. Each format suits a different job.
HEX
Six hexadecimal digits for red, green and blue — the most common way to write colors in CSS and design tools.
RGB
Red, green and blue channels from 0 to 255, with optional alpha for transparency.
HSL
Hue, saturation and lightness — an intuitive way to create lighter, darker or muted variations.
OKLCH
A perceptual model where equal steps look equal — ideal for modern design systems.
Guides
Learn by doing
Short, practical articles on CSS color, contrast and formats — each linked to a tool.
Accessibility
How to Check Text Color Contrast for WCAG
Measure foreground and background contrast, understand AA and AAA thresholds, and fix failing text without guessing.
Read guide Color formatsHex vs RGB vs HSL: Which Color Format Should You Use?
Understand how Hex, RGB and HSL represent the same screen color, how alpha works and when each CSS format is most useful.
Read guide Color calculationDigital Color Mixing and Opacity Explained
Learn how screen colors blend, how alpha compositing changes the visible result and how to build useful transition scales.
Read guide- Instant Results update as you type. No waiting, no page reloads.
- Private Colors and images stay in your browser. Nothing is uploaded.
- Free, no sign-up Every tool is free to use, forever. Just open one and go.