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.
UD5 Toolkit
(max + min) / 2. If max equals min, the color is achromatic (gray) and saturation is 0. Otherwise, Saturation depends on lightness: if lightness ≤ 0.5, it's (max-min)/(max+min); if > 0.5, it's (max-min)/(2-max-min). Hue is determined by which RGB channel is dominant, producing an angle from 0° to 360° on the color wheel. Our tool performs these calculations instantly and accurately.
hsl() in stylesheets for more readable, maintainable color values.Enter HSL values and get the exact RGB representation. Also shows hex. For fine‑tuning design tokens. Client‑side.
Quickly convert HEX color codes to RGB values and vice versa. See the color preview. Indispensable for web developers and graphic designers.
Enter color in any CSS format and see all other representations. Live preview. Swatch history.
Convert RGB and RGBA color values to their HEX or HEX+alpha representation. Live preview and copy CSS color strings instantly.
Enter a Kelvin value (1000‑40000) and see the approximate white‑balance color. Photography and lighting reference.
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.
Convert screen RGB colors to print-ready CMYK values. Understand color shifts before printing. Ideal for graphic designers preparing artwork for press.
Classic HSV color wheel with sliders. See hex, RGB, and HSL equivalents. Intuitive for artists. No server interaction.
Select colors in the OKLCH space with lightness, chroma, and hue. Convert to hex, RGB, and CSS oklch(). Perceptually uniform gradients.
Generate single random colors or full palettes. Displays hex, RGB, and copy on click. Great for design inspiration.
Upload an image and instantly get a 6‑color palette with the most dominant shades. Click to copy hex codes. Canvas‑based.
Test if your display supports HDR colors by rendering a gradient in Rec.2020 space. See what you're missing. Canvas based.
Paste a stylesheet and extract every unique color (hex, rgb, hsl) into a palette. Swatches displayed. Copy as JSON.
Pick colors using the HWB (Hue‑Whiteness‑Blackness) model. Get the CSS hwb() function code. Simpler than HSL for some.
Discover beautiful color palettes for your projects. Generate random, complementary, or trendy schemes and copy hex codes. Useful for designers and developers.
Interactively create colors in HWB space and get the CSS hwb() function. Simplifies tint/shade workflows. Live preview.
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.
Paste body text and test different font/background combos. See an actual passage rendered, not just a ratio. True feel for legibility.
Mix and save colors using a color picker. Drag to reorder. Export as CSS variables or hex list.
Select emotions (calm, energetic, sad) and generate a harmonious color palette that reflects the mood.
List up to 10 colors and generate a contrast ratio matrix. See which pairs pass WCAG quickly.
Type a CSS color name like 'tomato' or 'mediumseagreen' and instantly get its hex code and preview. Complete named colors list.
Paste hex colors, generate a contrast matrix against each other. Identify failing pairs for WCAG.
Enter a color palette and see how it looks for different types of color vision deficiency. Get warnings on conflicting colors.
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.
Pick a color in the Display‑P3 space and get the CSS color() function. See the difference from sRGB. For modern design.
Enter a palette of colors and see a grid showing whether each foreground/background pair passes AA or AAA contrast. Must for designers.
Use the light‑dark() CSS function to change colors based on color scheme. Build a simple dark mode toggle with one property.
Build a palette and simulate how it appears to various color deficiencies. Also generate pre-vetted accessible palettes. Local processing.
Write modern CSS color functions like oklch(), lab(), hwb() and see the rendered color with fallback. Copy compatible code.