Full Guide to Colour Conversion: HEX, RGB, HSL and Contrast Awareness

Update 2026-08-08 About 12 minutes development tools How-to

The designer gave it to me. #b8ff78The assembly library API wants rgb(), the theme variable wants to use hsl() Do the cover bright -- in the middle. Unlost format interchanges。 This guide describes three expressions, the actual operation of the toolpage, the Alpha and the display limits, and emphasizes that contrasts must be measured and not "observed enough" and that the conversion and contrast tool for the KiloCell of cells should be used.

Use tools immediately Colour Conversion - HEX / RGB / HSL Swing and Slide

Open tool →

The core sentence.

(a) Multiple writings of the same colour; The cross-reference is the log, and the contrast is whether or not it can be read.

HEX, RGB, HSL describe the same kind of screen in the sRGB common scene. The converter helps you to synchronize the log; It doesn't tell you whether "the white color is legal" on the bottom. Accessibility comparisons are done by contrast algorithms or by Contrast Check。 Here we go on the "Model-show-select-scene-scene-scene-faQ" and then we go on.

1. HEX, RGB, HSL, whatever.

Format	Typical	Intuition.	Common uses
HEX	`#b8ff78` / `#abc`	Tight, easy token	CSS Variables, Designer Emblems, SVG
RGB	`rgb(59, 130, 246)`	3-passage 0–255	Align with canvas/pixels, old data
HSL	`hsl(217, 91%, 60%)`	Colour/Saturation/Saturation	Generate cover, dark theme fine tune

HEX

Common 6 bits:#RRGGBBHexadecimals per person 0-9A-F。
3-bit short #RGB It's like repeating each and every one.#3af → #33aaff。
8 bits #RRGGBBAA Including alpha;The main path of the site converts the page is dominated by 6 bits of opacity colour(See capability boundaries).
(b) General case equivalent; The tools are often consolidated into uppercases to facilitate comparison.

RGB

Consistent with the monitor colouring model: R/G/B higher, brighter.
CSS is still supporting rgba() And modern rgb(59 130 246 / 0.5) Space syntax.
Cross-reference:Do not mix the 0-1 flight channel with 0-255。

HSL

H Colour: 0-360 degrees, rounded.
S Saturation: 0% ash 100% pure.
L Brightness: 0% black, 50% "Pretty colored typical area", 100% white.
When doing "same brand brighter/darker", priority is given to L (sometimes finely adjusted S), which is more manageable than to directly change HEX.
HSL L No, it's not.Perfect model of sensory brightness (more evenly OKLCH etc.); But for most UIs, it's already clearly better than blindly changing HEX.

Relationship to Design Tool Color

Figma/Sketch may display sRGB or other profile files. When web CSS defaults to understand these functions by sRGB,Based on the value exported to CSS Make conversions, not assume that the printing of CMYK is reversible.

2. What can be done with the tool pages

tools：color converter。

Interface points (relative pages):

Large Preview Block — Displays the current colour and supersedes the HEX text on the block; This will be achieved by switching between deep/slight text to ensure that the colour is readable.
Circlecolor Picker - The system is colored, it's for the screen.
Three input boxes for HEX/ RGB/ HSL - Every one with a "copy" button.
R, G, B slider - 0-255, bygone values, drag or sync format.
Preset Colour Point - Yellow orange blue and blue twilight, jumps fast to common colour.

Script Inline rgbToHex、hexToRgb、rgbToHsl、hslToRgb , the change of any input will try to parse and refresh other fields and previews.

Capacity boundaries

Strengths: SRGB Opacity colours are synchronized between HEX ↔ RGB ↔ HSL, slider finely, one-click copy, local running.
Weak / Do not declare: Full ICC administration, CMYK, OKLCH input, HDR, any CSS colour, Level 4 syntax resolution;Alpha ChannelIf you enter a transparent text, you need to confirm whether the page is kept (the main UI is dominated by a RGB slider of 3D).
Contrast: The preview of automatic black/white only ensures that "colours are visible on the colour block" and that the word "colour" is not used in the text.No, it's not. WCAG Text Contrast Compliance Certificate.

3. Phased operation

Open /tools/dev/color-converter。
Copy from the script HEX(includes or excludes) # Paste to the HEX box, Tab or trigger input to see if RGB/HSL is updated.
or drag the RGB slider (b) Aligning; Watching HSL H is a mutation - it is normal to be unstable in the color of the axis.
Or point preset The government has been able to get the most out of the world and to get it to the top.
Copying target format: Writing CSS variables is common HEX or HSL; use RGB when matching with Canvas pixel API.
birth: Raises or decreases L by about 6%-12% (subject to background) on HSL, then copys the new HEX back to the token table.
Readability check: Bringing the final value of the outlook/background Contrast Check(If the same name is also available under the design catalogue, bookmarks may be given to the first tool to see if AA/AAAA is reached.
After writing code Available CSS Format Collapse the variable blocks, but the colour values themselves are subject to conversion.

4. Accessibility: why must a separate comparison be measured

People's eyes are sensitive to contrasts in different contexts, in different characters, and in different words. WCAG has different contrast thresholds for the body and large words (common discussion AA: main text 4.5:1, big words 3:1: etc. - which is based on your compliance target document).

Error	Live
"The numbers on the preview are white, and that means compliance."	Only indicate that the colour numbers are stacked on the colour blocks to read
"The brand blue must be enough in white."	Light brands are often not enough 4.5:1
"Just a little deeper."	Possible still 0.2; To measure
"Colour-blind model simulation = contrast"	It's relevant, but not the same indicator.
"Slowing S with HSL is safer"	Maybe the ash is still not in line.

Workstream recommendations: Converter Colour Colour Contrast Tool to measure a pair of colours Change L or change background and return to HEX for the design system.

The changer's "inline compliance" is not to be used in the conversion guide. This station places the measurements in the center-checker, which is the correct split.

5. Common errors and treatments

phenomena	Common causes	What do we do?
Invalid HEX input	Less `#`and `g` Invalid characters, length incorrect	6-bit hexadecimal; Colour first from the picker
RGB Paste Failed	Percentage or `rgba` And the resolution only recognizes integers.	First, change to 0-255. Third channel.
HSL, change the color.	H is meaningless when it is low; Rounded	Raise S and then rephrase H; Accept 1° error
Shortfall with draft 1	Circle, colour space, monitor calibration	Token locks to design the export specified format
Copyed a string with spaces	CSS Old Project Sensitive	Unified Team Format (space or no)
Transparent color to solid	UI main path does not keep alpha	Transparency in a Separate `rgba`/`#RRGGBBAA` Process
The dark theme "The reverse" is ugly.	Simple counter-RTB Zen Good Theme	Drop L with HSL or design double token
Gradient middle belt dirty.	HSL plug-in is not sensory even	Accept or convert to more modern colour space tools
Contrast is not satisfactory and is still on line	Only the format is undetected	Required via contrast-checker

6. Real work scene

Scenario A: Write design token into CSS variables

Designed for HEX tables. Converter generates HSL, written:

:root {
  --color-brand: 217 91% 60%; /* Complement hsl(var(--color-brand)) */
}

hover：hsl(var(--color-brand-h) var(--color-brand-s) calc(var(--color-brand-l) + 8%)) One type of structure (specific splits agreed upon by team). Try L in the tool and then land.

scene B:Canvas Colour & CSS Alignment

getImageData Get RGB integer Quick Fill in RGB Box Quote Copy HEX to Styles or Documents. Note that pre-loading alpha images is transparent first.

Scenario C: Chart Series

To 5 sequences of different brightness of the same color: fix H/S, sweep L only, copy five HEX. The government has also been conducting a comparative check of the "white word" in the color.

scene D: Mail Client

Partial client pairing hsl() Support bad. Export HEX or RGB Steady. The converter is responsible for bringing the designer 's HSL decision to HEX.

Environment E: Accessible Change Week

Product contrasts are not up to standard. Use the checker to confirm the difference, the converter to increase L toggle or change the background ash step, and output the new token, and drive the PR. The government has been trying to avoid a "branding of the whole brand" without measuring it.

scene F: From competition

System colour remover colour → rotation HEX into document. (b) Attention to environmental light and monitors; Competition is a reference, and compliance and branding still follow their own systems.

7. List of works

Design system locking A source format(Long HEX or OKLCH), other is the generator
Document to support alpha
The body/ icon/disable state is each matched by acceptance
Dark theme is measured separately, not only reverse
(b) Prohibiting the digital spread of magic in business; Walk CSS Variable
Print/showshows are proofreaded separately (this tool is on screen sRGB)

FAQ

HEX and RGB, which is more accurate?

In the same sRGB quantification,#b8ff78 and rgb(59,130,246) Expresss the same 8-bit colour. No one is more precise, only who is more suitable for the current API.

Why is HSL L=50% not looking like medium ash?

HSL's I'm not CIELAB brightness. Different colours vary in the light of L=50%. More modern models are needed when perception is even; UI fine-tuning is still common HSL.

3-bit HEX, do you want to expand?

Write token recommends 6 bits of harmonization and reduces the difference between tools and regulars. Briefly fit the handwritten draft.

Will conversion lose color?

Interchange within 8-bit sRGB, with the main loss from Rounded(HSL integer degree and percentage). General ±1 channel acceptable; The key frame of animation needs to be more careful.

Is the color-blind user only on the contrast?

Contrast is one of the necessary conditions, not all. You need to send more than just the only message (with icons/text). The converter does not resolve the information design.

Can you convert the `color: red ' keyword for CSS?

is the keysheet that is achieved on the page; It is conservative to calculate RGBs in the browser before you post them. Keywords also include complex situations such as system colour.

Will the online conversion pass my brand?

Calculates the local completion of the browser. The brand is rarely confidential in itself, but the unpublished set of topics does not have to be fully displayed on the public air.

Retrace check before the colour value is delivered

When colours enter code from the draft, the most likely occurrence is not a formula error, but a context loss. The designer gave it to me. #b8ff78, the developer may write it in the button background, but forget the suspension, disablement and dark background in the draft. It is recommended that each colour value be recorded as “Use, perspective, background, interactive status, format”, for example primary-600 For White Word Buttons, the default is #7fbf4a, suspending the HSL and lowering the L value. This converter is only completing the expression conversion and the decision remains in the design token table.

Alpha also introduces a frequently overlooked question: the final colour for a translucent outlook depends on the color behind it.rgba(0, 0, 0, 0.2) The visual results are not the same on the white and blue floors; Convert it directly to opacity HEX will lose the syntax of "clip background". If you need to export a screenshot, gradient or shadow, the alpha writing should be retained and contrasts checked against the target background. If the tool only handles opacity RGB, the transparency layer should be considered a separate CSS variable and not impersonate an approximation colour as an original design value.

Teamwork is also about making a case, keeping it. #, Space Formatting and Rounded Numbers. The uniform format reduces the meaningless differences in code review, but does not prove that the two values are visually equivalent. (b) A sample of light, dark and high contrasting themes was examined prior to deployment, confirming that text, borders and focus rings remained clear; Colour converter cannot test the browser's hybrid mode, filter or system for mandatory colouring.

Continue reading

Walking through the preset blues "Slipper Blocks Clip 3-Back Copying HSL & L & & Copy HEX" and then throws the final outlook/background into the contrast tool. Write CSS variables after you have passed.

Open Color Converter Open Contrast Check Back Guide List All tools