Sending the CMYK estimate directly to a printer
The displayed CMYK numbers use a profile-free mathematical estimate. Press, ink, paper, rendering intent, and ICC profiles can produce materially different separations.
HEX, RGB, and HSL Color Converter with WCAG Contrast
ColorRuns in Your Browser (No Uploads)
Parse a bounded sRGB color from HEX, CSS rgb()/rgba(), hsl()/hsla(), or a named CSS color, then compare canonical HEX, RGB, HSL, HSV, and profile-free CMYK reference values. Alpha colors are composited over the selected white or black backdrop before WCAG 2.2 contrast is calculated. Processing stays in the browser, unsupported CSS Color 4 spaces fail visibly, and the CMYK output is explicitly a profile-free estimate rather than an ICC-managed print conversion.
What to do next
Continue with a related workflow or open the next tool that usually follows this task.
Workflow guide
Convert CSS colors and verify text contrast
Use a color converter to create reviewable sRGB values, but make the final decision in context: preserve the source token, resolve transparency against the real backdrop, test every state, and keep profile-free CMYK estimates out of press-ready files.
OpenRelated toolCode Format Workbench | CSS, HTML, JavaScript, and More
Format, minify, and syntax-check eight code and data languages locally with parser-specific engines.
OpenRelated toolImage Watermark | Add Text or Logo Locally
Add text or logo watermarks to static PNG, JPEG and WebP images locally, one image or a bounded batch at a time.
OpenRelated toolMarkdown Preview and Sanitized HTML Converter
Preview Markdown locally and export sanitized HTML with tables, tasks, code, math, and footnotes.
OpenHow to Use This Tool
Enter a supported HEX, CSS RGB, CSS HSL, transparent, or named CSS color and apply it.
Compare the canonical HEX, RGB, and HSL outputs with the non-CSS HSV and CMYK reference values.
Use the RGB, HSL, and alpha controls to adjust the resolved sRGB color without reparsing text.
For transparency, choose the real white or black backdrop before reading contrast results.
Check white and black text against the 4.5:1 normal-text and 3:1 large-text AA thresholds.
Copy the destination format, then verify actual CSS, design-token, browser, and print workflows separately.
When to Use This Tool
Migrate CSS variables without dropping transparency
Translate an existing CSS token between HEX, rgba(), and hsla() while retaining alpha and checking for sRGB clipping.
Document design-system color tokens
Record canonical HEX, RGB, HSL, and HSV values for a design token while marking which strings are valid CSS.
Review text on translucent surfaces
Resolve a translucent overlay against white or black before choosing readable white or black text.
Triage WCAG text contrast
Check normal and large text thresholds as one step in a broader state, focus, and visual accessibility audit.
Prepare a web-to-print handoff
Provide a clearly labelled CMYK estimate to start a conversation, then hand the source sRGB token to an ICC-managed print workflow.
Common Mistakes
Checking an alpha color without its backdrop
A translucent foreground or background has no single visible color. The final contrast changes with the backdrop, so select the real white or black canvas and test the actual stacked design.
Pasting the HSV or CMYK reference into CSS
HEX, rgb(), and hsl() outputs are CSS-ready. HSV and the cmyk() reference string are data labels for design review, not CSS declarations supported by this tool.
Assuming every formatted round trip is byte-identical
CSS parsing, 8-bit HEX serialization, and two-decimal display values can clamp or round channels. Keep the original token when exact authoring precision or a wider gamut matters.
Treating one contrast ratio as a complete accessibility audit
A passing ratio does not verify focus states, disabled states, gradients, images, font rendering, color vision differences, or whether information relies on color alone.
Examples
Convert a modern CSS RGB color with alpha
The CSS Color 4 percentage input includes 25% alpha. HEX uses RRGGBBAA order, while RGB and HSL keep the alpha channel in CSS-compatible output.
Input
rgb(100% 0% 50% / 25%)Output
HEX #FF008040 | RGB rgba(255, 0, 128, 0.25) | HSL hsla(330, 100%, 50%, 0.25) | HSV hsv(330deg 100% 100% / 25%) | CMYK estimate cmyk(0% 100% 50% 0%)Review a color on both sides of the AA threshold
Near the WCAG AA boundary, rounding the displayed ratio does not change the unrounded threshold decision. White fails normal text at 4.48:1; black passes at 4.69:1.
Input
#777777Output
White text: 4.48:1, normal AA fail, large AA pass | Black text: 4.69:1, normal AA pass, large AA pass | Recommended: blackHow CSS sRGB, alpha, contrast, and CMYK estimates are separated
A bounded parser accepts the documented HEX and CSS sRGB syntaxes, including legacy comma and modern space/slash forms. Culori performs parsing and sRGB, HSL, and HSV conversion; unsupported, incomplete, or non-finite values fail without changing the last accepted result.
HEX uses RGB or RGBA byte order: #RRGGBB for opaque colors and #RRGGBBAA when alpha is below 1. CSS RGB and HSL serialization keeps alpha for rgba()/hsla() output. A CSS input outside the displayable sRGB cube is clipped and visibly flagged.
HSL and HSV are cylindrical views of the same clipped sRGB color. Hue is mathematically powerless for neutral colors, so the control retains a review hue while the visible result remains gray. HSV is reported for design data and is not presented as a CSS function.
The CMYK reference uses K = 1 - max(R,G,B), then derives C, M, and Y after removing K. That equation has no device profile and cannot model ink, paper, total area coverage, black generation, spot colors, or rendering intent.
For alpha colors, source-over compositing resolves the selected color against the chosen white or black backdrop. WCAG relative luminance then produces (L1 + 0.05) / (L2 + 0.05). AA thresholds are 4.5:1 for normal text and 3:1 for large text.
Input is limited to 256 characters. Conversion is local and non-mutating. Up to eight canonical recent colors can be stored under a namespaced browser-storage key; reset removes them. No actual color value is included in conversion analytics.
Frequently Asked Questions
Which color inputs are accepted?
The input accepts #RGB, #RGBA, #RRGGBB, #RRGGBBAA, modern or legacy CSS rgb()/rgba(), hsl()/hsla(), transparent, and named CSS colors. It does not claim every CSS Color 4 space or currentColor and system-color resolution.
Does the converter preserve transparency?
Yes. Four- and eight-digit HEX and CSS alpha syntax are retained. The alpha control updates every sRGB output. HSV reports alpha as data; CMYK itself has no alpha channel in this estimate.
Is the CMYK result press-ready?
No. The CMYK result is a simple profile-free estimate from clipped sRGB. Press-ready conversion requires the printer's ICC profile, substrate, ink limits, black generation, and rendering intent in color-managed software.
How is contrast calculated for a transparent color?
The selected alpha color is composited over the chosen white or black backdrop first. WCAG relative luminance and contrast are then calculated from that resolved opaque sRGB color. Test other real backdrops separately.
Can I paste the HSV result into CSS?
No. HSV is useful for design-tool exchange and intuitive value controls, but CSS Color 4 does not define an hsv() color function. Use the HEX, RGB, or HSL result in CSS.
What rounding rules does the tool use?
HEX serializes to 8-bit channels. RGB is shown as integer channels, and HSL, HSV, CMYK, luminance, and contrast use bounded display precision. Pass/fail uses the unrounded contrast ratio before display rounding.
Are colors uploaded or stored remotely?
Conversion and contrast calculation run in the browser. Recent canonical colors are stored only in this browser and reset clears them. Aggregate analytics can record the source format and warning flags, not the entered color string or copied result.
How This Tool Was Verified
Maintained and tested by SimpleWebUtilsReviewed
Method: For the HEX, RGB, and HSL Color Converter with WCAG Contrast review, we preserved the source shown in “Resolve a translucent CSS token before choosing text” and completed “Classify the source syntax and color space” and “Apply the correct WCAG threshold”. The produced output was compared literally where possible, with “Dropping alpha during format conversion” and “Testing the source color instead of the composite” checked against the linked failure evidence.
Expected result: The translucent token normalized to #2563EBD1, resolved over white to #4C7FEF, and showed that black text passes normal AA at 5.59:1 while white text fails at 3.76:1.
Open the tested workflowRelated workflow guides
Use these focused guides when you need a practical workflow before opening the tool.
Workflow guide
Convert CSS colors and verify text contrast
Use a color converter to create reviewable sRGB values, but make the final decision in context: preserve the source token, resolve transparency against the real backdrop, test every state, and keep profile-free CMYK estimates out of press-ready files.
Workflow guideWatermark product images consistently before sharing
This workflow turns a folder of product, proof, or portfolio images into a reviewed sharing set: preserve the masters, choose text or logo for a clear purpose, test contrast and rotated placement across representative aspect ratios, process only supported static files, and verify format, metadata, naming, and visual quality after download.
Related Tools
Continue with another maintained workflow
Code Format Workbench | CSS, HTML, JavaScript, and More
Format, minify, and syntax-check eight code and data languages locally with parser-specific engines.
Formatting
Image Watermark | Add Text or Logo Locally
Add text or logo watermarks to static PNG, JPEG and WebP images locally, one image or a bounded batch at a time.
Image
Markdown Preview and Sanitized HTML Converter
Preview Markdown locally and export sanitized HTML with tables, tasks, code, math, and footnotes.
Formatting
PDF Watermark | Add Text or Image Watermarks Locally
Add text or image watermarks to PDFs with page range, opacity, rotation, and position controls.
PDF
QR Code Generator | Exact PNG and SVG with Scan-Safe Settings
Encode exact text or a prepared URL, Wi-Fi, email, phone, SMS, or vCard payload as PNG or SVG.
QR Code