How to convert HEX/RGB/HSL color codes and check color scheme

When this guide is useful

Users who want to check color code conversion from HEX to RGB, RGB to HSL, web color scheme, complementary colors, and text color contrast ratio can check a series of steps.

• Convert between HEX and RGB values for CSS
• Check the contrast between button text and background color
• Create a palette of complementary or similar colors from the standard color

Color information that can be checked

• Mutual conversion between HEX, RGB, HSL, and HSV
• Contrast ratio between foreground and background colors
• Additional information for this feature.
• Values for temporary palettes and CSS variables

Steps to determine color code

1. Select the standard color using the color picker or numerical values.
2. Copy
3. Additional information for this feature.
4. Additional information: UI

Accessibility note

Even if the contrast ratio meets the standard, readability will vary depending on font size, thickness, display, and color vision characteristics. Please check the actual screen as well.

Don't just use color to convey status; also use other cues such as labels, icons, and underlining.

Specific example: Deciding the font color of the blue button

Select the standard blue color and compare the contrast ratio of white and black characters.

Additional information for this feature.

1. Input
2. Set the foreground color to white and check the contrast.
3. Also compare with black text.
4. Add the adopted color to the palette and copy the code.

Smaller text requires higher contrast. Please check the actual font size.

Frequently asked questions

Does the color change between HEX and RGB?

Additional information for this feature.

Can readability be determined by contrast ratio alone?

Although these are important indicators, please also check the font size, thickness, and display environment.