Color Converter

Convert colors between HEX, RGB, HSL, and HSV. Pick a color or enter values manually.

#4B7BEC
R
G
B
S%
L%
HEX#4B7BEC
RGBrgb(75, 123, 236)
HSLhsl(0, 0%, 0%)
HSVhsv(0, 0%, 0%)
3.93:1

vs White

AA Large
5.34:1

vs Black

AA

About Color Converter

Convert colors between HEX, RGB, HSL, and HSV formats instantly. This free color converter runs entirely in your browser — no data is sent to any server. Use the color picker or enter values manually.

Features: Real-time conversion between all formats, WCAG contrast ratio checker for accessibility, one-click copy for CSS values, visual color picker, and preset color palette.

Frequently Asked Questions

What is a HEX color code?

A HEX color code is a six-digit hexadecimal number preceded by #. It represents a color using RGB values where each pair of digits (00-FF) corresponds to red, green, and blue intensity. For example, #FF0000 is pure red, #00FF00 is pure green, and #0000FF is pure blue.

What is the difference between RGB and HSL?

RGB (Red, Green, Blue) defines colors by mixing light intensities from 0-255. HSL (Hue, Saturation, Lightness) is more intuitive: Hue is the color angle (0-360°), Saturation is the color intensity (0-100%), and Lightness is how bright or dark (0-100%). HSL is easier for humans to understand and adjust.

What is WCAG contrast ratio?

WCAG (Web Content Accessibility Guidelines) contrast ratio measures the readability of text against a background. A ratio of 4.5:1 is required for normal text (AA), 3:1 for large text (AA Large), and 7:1 for enhanced contrast (AAA). This tool shows the contrast ratio against both white and black backgrounds.

How do I convert HEX to RGB?

To convert HEX to RGB: take each pair of hex digits and convert to decimal. For example, #4B7BEC: 4B = 75 (red), 7B = 123 (green), EC = 236 (blue), giving rgb(75, 123, 236). This tool does the conversion instantly as you type.

Is my data safe?

Yes. This color converter runs entirely in your browser using JavaScript. No data is sent to any server. All conversions happen locally on your device.

Can I use this for CSS styling?

Absolutely. Click the copy button next to any format (HEX, RGB, HSL) to copy the CSS-ready value. You can paste it directly into your stylesheets. All formats are valid CSS color values.