Color Converter
HEX
#3b82f6RGB
rgb(59, 130, 246)HSL
hsl(217, 91%, 60%)OKLCH
oklch(0.623 0.188 259.8)HSL 조정
대비 비율 (WCAG)
비교 색상:
샘플 텍스트
대비 비율: 3.68:1
WCAG: AA Large
Last updated: 2026 · Free online tool
What is Color Converter?
Free online color converter that translates instantly between HEX, RGB, HSL and OKLCH codes and calculates the WCAG contrast ratio between two colors so you can check accessibility compliance with ease.
How to Use
- 1 Enter a color — Use the color picker or text input. HEX, rgb(), and hsl() formats are supported.
- 2 View formats — HEX, RGB, HSL, and OKLCH formats are displayed simultaneously.
- 3 Copy values — Use the copy button for each format to copy the CSS value.
- 4 Check contrast ratio — Set a comparison color to check the WCAG contrast ratio.
Related Tools
Timestamp Converter Free online tool to convert between Unix timestamps and dates in both directions. It accepts seconds (10 digits) and milliseconds (13 digits), and supports timezones like KST, JST, UTC plus ISO 8601 and relative time.
CSS Gradient Generator Free online visual CSS gradient generator: design linear, radial and conic gradients, add color stops, tweak the angle, then copy ready-to-use CSS for your backgrounds.
CSS Box Shadow Generator Free online CSS box-shadow generator with controls for offset, blur, spread, color and inset, offering a live preview of the shadow and producing copy-ready box-shadow CSS code for any element.
Frequently Asked Questions
OKLCH is a cylindrical representation of the Oklab color space, the most perceptually uniform color space. It is supported in CSS Color Level 4.
It measures the luminance difference between text and background colors. AA requires at least 4.5:1, AAA requires 7:1.
Currently only opaque colors (RGB, 6-digit HEX) are supported. RGBA and HSLA will be added in a future update.
Yes. You can paste the output of each format directly into your CSS.
No. All color conversions happen in your browser.