Color tools family
Online Color Tools and Accessibility Guide
Convert digital colour values, compare palettes, and evaluate contrast while keeping colour space, alpha, text size, standard version, and output medium explicit.
What this page helps you do
Colour values are coordinates in a colour model or colour space, not universal physical colours. HEX commonly represents sRGB channel values for web use. RGB, HSL, and HSV are different ways of describing related digital values. CMYK is a device- and profile-dependent print model and cannot be converted perfectly from a web colour without a colour-managed workflow.
The published grid below lists the resources available in this family. This page also explains contrast testing and palette review. A contrast ratio is calculated from the rendered foreground and background colours under a defined formula, but accessibility depends on more than a passing number. Text size and weight, states, focus indicators, non-text controls, images, overlays, transparency, and user settings matter.
Colour-vision deficiency simulations and palette generators support review; they do not represent every person’s perception. Do not encode meaning with colour alone. Add labels, patterns, shape, position, text, or icons so status and instructions remain understandable when colour is unavailable or altered.
Published resources in this family
New Color Tools are coming soon
We're currently preparing high-quality tools for this category. Please check back soon or explore other tool categories.
Browse all ToolsChoose the right approach
Convert representations
Use HEX, RGB, HSL, or HSV conversion for the same intended digital colour, while retaining alpha and colour-space assumptions.
Check contrast
Test the actual foreground and background for every state, including hover, focus, disabled, visited, error, and text over images.
Build a robust palette
Review hierarchy, distinguishability, colour-blind access, dark and light contexts, print output, and component-level usage.
Reference table
| Topic | What to record | Common mistake |
|---|---|---|
| HEX and RGB | sRGB assumption, channel values, and alpha | Treating a value as identical across unmanaged displays and print. |
| HSL and HSV | Conversion method and rounding | Assuming equal numeric steps create equal perceived changes. |
| CMYK output | Printer, ink, paper, ICC profile, and rendering intent | Using a generic conversion as a press-ready specification. |
| Text contrast | Foreground, background, text size, weight, and WCAG version | Testing only one static state or ignoring transparency. |
| Non-text contrast | Component boundaries, icons, focus, charts, and adjacent colours | Applying text thresholds to every non-text case without reading the criterion. |
| Colour-vision review | Simulation type plus non-colour cues | Assuming one simulation represents all users. |
| Gradients and images | Worst-case local background behind content | Testing only the average or endpoint colour. |
Worked example: contrast in the site palette
Using the WCAG relative-luminance method, the main text colour #F8FAFC against the background #0B0F19 has an approximate contrast ratio of 18.30:1. The secondary text colour #A0AEC0 against the same background is approximately 8.49:1.
The turquoise accent #00E5FF against #0B0F19 is approximately 12.45:1. The purple accent #8B5CF6 against #0B0F19 is approximately 4.52:1. That last pairing is close to the common 4.5:1 threshold for normal text, so rounding, transparency, antialiasing, gradients, state changes, and a different background can affect the practical result.
A numerical check should use the final computed colours, including alpha blending. Then inspect real components at zoom, with keyboard focus, in forced-colour or high-contrast modes where applicable, and with labels that do not rely on hue alone.
For print, these web values are only a starting point. Convert through the correct ICC profile, soft-proof, check total ink and gamut, and approve a physical proof when colour accuracy is consequential.
Colour review checklist
Identify the colour space
Record sRGB or another space, alpha, profile, display or print destination, and the exact computed values.
Test every state
Check text, links, focus, controls, errors, charts, overlays, gradients, disabled states, and selected states.
Add non-colour meaning
Use labels, icons, patterns, underlines, shapes, or position so colour is not the only signal.
Validate the real output
Test in browsers and devices, use accessibility tools, inspect print proofs, and review with users when possible.
Assumptions, limitations, and review
Passing a contrast calculation does not establish complete conformance with WCAG or another accessibility standard. Scope, version, success criteria, content, keyboard operation, semantics, and user testing still matter.
Perceived colour is affected by display calibration, ambient light, vision, adjacent colours, transparency, antialiasing, and size. HSL lightness is not the same as perceptual lightness.
Pattern and gradient generators can create visually intense output. Avoid combinations that reduce readability or may trigger discomfort, and provide controls or alternatives when motion or flashing is involved.
Related TestsAndTools pages
External reference resources
These links support further verification and learning. External sites have their own content, privacy, and accessibility practices.
W3C WAI: Understanding Contrast (Minimum)
The WCAG 2.2 explanatory resource for minimum text contrast, exceptions, and applicability.
W3C: CSS Color Module Level 4
The current technical specification for CSS colour values, spaces, conversions, and related web behaviour.
Frequently asked questions
Does a HEX value identify the same physical colour everywhere?
No. It normally assumes an RGB space such as sRGB, while displays, profiles, calibration, ambient light, and print processes differ.
Is passing 4.5:1 enough for accessibility?
It may satisfy one contrast condition for qualifying text, but complete accessibility requires the correct criterion, all states, semantics, operation, and broader testing.
Can HSL lightness predict perceived brightness?
Not reliably. HSL is convenient for editing but is not perceptually uniform.
Should colour be the only way to show an error?
No. Add text, icons, structure, and programmatic cues so the message remains clear without colour.
Can an RGB-to-CMYK converter produce press-ready values?
Not without the destination profile, printing condition, paper, ink limits, rendering intent, and proofing workflow.