Toolkit
Online Color Tools
Free color tools for designers and developers: conversion, contrast, mixing, names, opacity, image palettes, gradients, OKLCH, Tailwind matching and UI shade scales. Everything runs in your browser.
Studio tools
Choose a tool by task
Start with the problem in front of you. Results update instantly.
Convert
RGB to Hex Converter with RGBA, HSL & OKLCH
Convert RGB and RGBA values to Hex, Hex8, HSL, HSV and OKLCH instantly for CSS, design tokens and UI color systems.
Hex to RGB Converter with HSL, HSV & OKLCH
Convert 3, 4, 6 or 8 digit Hex color codes to RGB, RGBA, HSL, HSV and OKLCH, including alpha transparency.
Color Opacity Calculator - RGBA & Hex Alpha
Convert color opacity percentages to RGBA, HSLA and eight-digit Hex alpha values, with live previews over white, black and custom backgrounds.
Hex Opacity Chart - Alpha Values for CSS
Convert opacity percentages to two-digit Hex alpha values and eight-digit Hex color codes with live RGBA previews.
OKLCH Converter - Hex, RGB & HSL to OKLCH
Convert Hex, RGB or HSL colors to OKLCH and copy modern CSS color syntax alongside Hex, RGB, HSL and HSV values.
RGB to CMYK Converter – HEX to CMYK Values
Convert RGB, HEX or HSL colors to CMYK percentages for print. See cyan, magenta, yellow and black values, total ink coverage and every web color format.
CMYK to HEX Converter – CMYK to RGB Values
Convert CMYK percentages to HEX, RGB and HSL color codes for the web. Adjust cyan, magenta, yellow and black with sliders and copy the screen equivalent.
HSL to HEX Converter – HSL & HSLA to Hex Code
Convert HSL and HSLA colors to HEX, RGB and OKLCH. Adjust hue, saturation and lightness with sliders and copy the hex code for your CSS instantly.
Check
Color Contrast Checker - WCAG AA & AAA
Check text and background color contrast against WCAG AA and AAA. Preview normal text, large text, buttons, links and dark mode color pairs.
Color Name Finder - CSS & Chinese Color Names
Find the closest CSS color name and traditional Chinese color name for any Hex, RGB or HSL value using perceptual OKLab matching.
Tailwind Color Converter - Find Closest Class
Convert any Hex, RGB or HSL color to the nearest Tailwind CSS palette color and copy bg, text, border and ring class names.
Color Blindness Simulator for Palettes & Images
Simulate protanopia, deuteranopia, tritanopia and achromatopsia for a palette or image, and find color pairs that people with color blindness may confuse.
Create
Online Color Mixer & Blend Calculator
Mix two digital colors at any ratio, copy the blended Hex/RGB/HSL value, and generate smooth 5-step or 10-step color transitions.
Image Palette Extractor - Get Colors from Photos
Upload a photo or screenshot and extract the dominant Hex colors locally in your browser. Copy a palette for UI design, branding and moodboards.
CSS Gradient Generator with Color Steps
Create a two-color linear CSS gradient, adjust the angle, copy background CSS, and export smooth intermediate color steps.
Color Shades Generator - 50 to 900 UI Scale
Generate a 50–900 shade scale from one base color, copy CSS variables, and preview tints, shades and UI-ready color tokens.
Color Palette Generator – Lock, Shuffle & Export
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.
Random Color Generator – Random HEX, RGB & HSL
Generate random colors with HEX, RGB and HSL codes. Choose light, dark, pastel, vivid or neutral styles, roll one color or a whole grid, and copy in one click.
Complementary Color Finder – Opposite & Inverted Colors
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.
Want to understand color formats first?
Learn Hex, RGB, HSL, contrast and opacity in the guides, then apply them with the tools.