Free · No sign-up · Runs in your browser
HTML Color Codes & Free Color Tools
Pick a color and get its HEX, RGB, HSL and OKLCH codes instantly, then check contrast, build palettes, gradients and Tailwind scales. Every tool runs locally in your browser: fast, free and private.
Explore this color
Color scheme generator →Harmonies, variations, contrast and color blindness previews for the color picked above. They update as you pick.
Popular color tools
Curated palettes →WCAG Contrast Checker
Evaluate text & UI components against WCAG 2.1 AA and AAA standards, with APCA scores alongside.
HEX to RGB Converter
Convert hex codes to RGB, HSL, OKLCH and CMYK instantly, with the math explained.
Palette Generator
Generate cohesive 5-color schemes with lockable swatches and export to CSS variables or JSON.
Tailwind Palette Generator
Turn one brand color into an even 50–950 Tailwind scale built in OKLCH, ready for v4 or v3.
CSS Gradient Builder
Build linear, radial, and conic gradients with multi-stop control and CSS code generation.
Image Color Picker
Drop any image and drag sample points over it to build a palette. 100% processed locally in your browser.
Color Blindness Simulator
Preview a design or screenshot as seen with protanopia, deuteranopia, tritanopia and achromatopsia.
Color Mixer & color-mix()
Blend two colors across 11 steps and copy HEX values or the matching CSS color-mix() expression.
Color Wheel
Drag around an interactive wheel to build analogous, complementary, triadic and square palettes.
Color Code Converter
Type a color in any format and get HEX, RGB, HSL, HSV, OKLCH and CMYK side by side.
Color Scheme Generator
Build complementary, analogous, triadic and tetradic schemes from one base color.
Tint & Shade Generator
Step a color toward white, black or gray to get an even ramp of tints, shades and tones.
APCA Contrast Checker
Score text and background pairs with the APCA Lc value and see the font sizes each score supports.
CSS Color Names
Browse all 148 named CSS colors by family, each with its HEX, RGB and HSL values.
Tailwind CSS Colors
Look up every color in the official Tailwind palette in v4 OKLCH and v3 HEX.
Popular HTML color names
All 148 CSS color names →Looking for a specific color? Browse all 148 CSS color names, the full Tailwind color palette, or read the color guides.
Why designers and developers use HTMLColor
Runs in your browser
No heavy frameworks or server roundtrips. Every color conversion is calculated instantly on your device.
Spec-accurate math
Built against the W3C CSS Color 4 and WCAG 2.1 specifications, with perceptual OKLCH and linear-light luminance.
Private by design
Your uploaded images and palette data never leave your browser. Only messages you choose to send through the contact form reach our server, and page visits are counted with Google Analytics.
Ready-to-paste exports
Copy tokens for CSS custom properties, SCSS variables, Tailwind v3 and v4, Swift, and Android XML.
Frequently asked questions
What is the difference between HEX, RGB, and OKLCH?
HEX and RGB describe the direct intensity of the red, green and blue channels. OKLCH is a perceptually uniform color space where lightness (L) looks consistent across hues, which makes accessible design systems and balanced palettes much easier to build.
What contrast ratio is required for WCAG Level AA compliance?
Under WCAG 2.1 Level AA, normal body text needs a contrast ratio of at least 4.5:1 against its background. Large text (18pt, or 14pt bold) needs at least 3:1, and UI components and meaningful graphics also need at least 3:1.
Are my uploaded images uploaded to any server?
No. All image color extraction and eyedropper operations run 100% locally in your web browser using HTML5 Canvas pixel manipulation.