UD5 Toolkit
RGB to HEX Converter - Online Color Translator
Convert RGB and RGBA color values to their HEX or HEX+alpha representation. Live preview and copy CSS color strings instantly.
CSS Color Converter All-in-One: Hex, RGB, HSL, OKLCH
Click the circle or use presets below
Hex
#6366F1
RGB
rgb(99, 102, 241)
HSL
hsl(239, 84%, 67%)
OKLCH
oklch(0.557 0.226 279.4)
OKLCH Fine-Tuning
Drag sliders to fine-tune in OKLCH space. Some combinations may exceed sRGB gamut.
Frequently Asked Questions
OKLCH is a perceptually uniform color space defined in CSS Color Level 4. Unlike HSL where lightness feels inconsistent across hues, OKLCH's Lightness (L) is based on human perception, making it far more predictable. Chroma (C) represents color intensity, and Hue (H) is the color angle. It's excellent for generating accessible color palettes, consistent gradients, and design systems.
HSL uses a cylindrical model where equal Lightness values don't appear equally bright to the human eye — a blue at 50% lightness looks much darker than a yellow at 50% lightness. OKLCH fixes this with perceptually uniform lightness. Additionally, OKLCH's Chroma is more intuitive than HSL's Saturation, and its Hue is more evenly spaced perceptually.
As of 2024,
oklch() is supported in all major browsers: Chrome 111+, Firefox 113+, Safari 15.4+, and Edge 111+. Global support exceeds 92%. For legacy browsers, provide a fallback using @supports or a hex/rgb fallback declared before the oklch value.OKLCH can represent colors beyond the sRGB color space (especially at high Chroma values). When converting such colors to Hex or RGB, they must be clipped to fit within sRGB, which may result in a slightly different color. The preview in this tool uses the native oklch() CSS value, so on P3-capable screens you'll see the true color, while Hex/RGB/HSL outputs show the sRGB-clipped approximation.
Most design tools (Figma, Sketch, Adobe XD) use Hex or RGB formats. You can copy the Hex value from this tool and paste it directly into any design app. Conversely, paste any Hex, RGB, or HSL value into the corresponding field here, and all formats will update instantly. Some modern tools like Figma now support OKLCH natively.
If you push Chroma very high, the resulting color may exceed the sRGB gamut. The Hex/RGB/HSL outputs will show the closest in-gamut sRGB approximation, which may appear unchanged even as you increase Chroma further. This is expected behavior — the full color is still preserved in the OKLCH output and the preview (on wide-gamut displays).
HEX to RGB Converter - Online Color Code Translator
Quickly convert HEX color codes to RGB values and vice versa. See the color preview. Indispensable for web developers and graphic designers.
HSL to RGB Converter - Online Precise Translation
Enter HSL values and get the exact RGB representation. Also shows hex. For fine‑tuning design tokens. Client‑side.
RGB to HSL Converter - Online Color Space Translator
Input RGB values and see the HSL equivalent with a color preview. Understand lightness and saturation. Local.
CSS Color Extractor - Online Find All Hex in Stylesheet
Paste a stylesheet and extract every unique color (hex, rgb, hsl) into a palette. Swatches displayed. Copy as JSON.
Color Temperature to RGB - Online Kelvin to Hex Converter
Enter a Kelvin value (1000‑40000) and see the approximate white‑balance color. Photography and lighting reference.
Online Color Picker - Eye Dropper & Color Selection Tool
Pick colors from a palette or use the eye dropper to sample colors from your screen. Converts between HEX, RGB, HSL. An essential tool for designers.
Color Name to Hex - Online Official CSS Colors
Type a CSS color name like 'tomato' or 'mediumseagreen' and instantly get its hex code and preview. Complete named colors list.
HTML Color Names - Online Complete List with Hex & Preview
A complete, searchable list of all 140+ named HTML/CSS colors with their hex codes and color previews. Click to copy code. Essential web reference.
Random Color Generator - Online Hex & RGB Palette
Generate single random colors or full palettes. Displays hex, RGB, and copy on click. Great for design inspiration.
CSS HWB Color Generator - Online Whiteness/Blackness Picker
Interactively create colors in HWB space and get the CSS hwb() function. Simplifies tint/shade workflows. Live preview.
OKLCH Color Picker & Converter - Online Perceptive Color
Select colors in the OKLCH space with lightness, chroma, and hue. Convert to hex, RGB, and CSS oklch(). Perceptually uniform gradients.
HSV Color Picker - Online Traditional Hue Wheel
Classic HSV color wheel with sliders. See hex, RGB, and HSL equivalents. Intuitive for artists. No server interaction.
CSS Color Function Explorer - Online Write Modern Colors
Write modern CSS color functions like oklch(), lab(), hwb() and see the rendered color with fallback. Copy compatible code.
Color Palette Generator - Online Random & Harmonious Colors
Discover beautiful color palettes for your projects. Generate random, complementary, or trendy schemes and copy hex codes. Useful for designers and developers.
Color Name Finder - Online Hex to Name Dictionary
Find the official name of any hex color from the extended color dictionary. Search by name to get the hex code. Handy for CSS and design language.
HWB Color Picker - Online Whiteness & Blackness Model
Pick colors using the HWB (Hue‑Whiteness‑Blackness) model. Get the CSS hwb() function code. Simpler than HSL for some.
Hex Contrast Grid – Online Test All Pair Combinations
List up to 10 colors and generate a contrast ratio matrix. See which pairs pass WCAG quickly.
Image Color Palette Extractor - Online Upload & Get Hex
Upload an image and instantly get a 6‑color palette with the most dominant shades. Click to copy hex codes. Canvas‑based.
contrast‑color() Preview - Online Automatic Text Color
Test the upcoming contrast‑color() CSS function. Get white or black automatically for a given background. See it live.
Emotion to Color Palette – Online Pick Mood & Get Hex
Select emotions (calm, energetic, sad) and generate a harmonious color palette that reflects the mood.
Named CSS Colors Explorer - Online Preview All 148
Grid of all 148 named CSS colors. Hover to see detail, click to copy the name or hex. Essential frontend reference.
RGB to CMYK Converter - Online Print Color Translator
Convert screen RGB colors to print-ready CMYK values. Understand color shifts before printing. Ideal for graphic designers preparing artwork for press.
CSS color‑mix() Function Playground - Online Tester
Dynamically blend two colors using the CSS color‑mix() function in different color spaces. Copy the exact CSS snippet. No JS required.
Color Scale Generator - Online Create Monochromatic Stops
Generate a range of tints and shades from a single hex color. Ideal for data visualization, UI design systems, and Tailwind custom palette creation. Local tool.
Accessible Color Contrast Matrix – Online Paste Palette & Check
Paste hex colors, generate a contrast matrix against each other. Identify failing pairs for WCAG.
Website Color Theme Extractor - Online Grab Palette from CSS
Fetch a website's CSS and extract :root custom properties (‑‑color) to reveal its design token palette. For learning and inspiration.
light‑dark() Function Tester - Online Color Switch
Use the light‑dark() CSS function to change colors based on color scheme. Build a simple dark mode toggle with one property.
color() Display‑P3 Generator - Online Wide Gamut CSS
Pick a color in the Display‑P3 space and get the CSS color() function. See the difference from sRGB. For modern design.
Color Readability Tester - Online Visual Contrast Meter
Paste body text and test different font/background combos. See an actual passage rendered, not just a ratio. True feel for legibility.