What is a hex color code?

A hex color code is a six-character string (e.g. #FF5733) that represents a color in the RGB color model. Each pair of characters encodes the intensity of red, green, and blue on a scale from 00 (0) to FF (255). Hex codes are the most widely used format in HTML, CSS, and design tools.

How do I convert RGB to hex?

To convert RGB to hex, take each channel value (0–255) and convert it to a two-digit hexadecimal number, then concatenate them with a # prefix. For example, rgb(255, 87, 51) becomes #FF5733 because 255 → FF, 87 → 57, and 51 → 33. This tool does the conversion automatically as you adjust the sliders.

What is the difference between HSL and RGB?

RGB (Red, Green, Blue) describes a color by its light component intensities and is how screens physically produce color. HSL (Hue, Saturation, Lightness) is a human-friendly model where Hue is the color angle (0–360°), Saturation controls vividness (0–100%), and Lightness controls brightness from black to white (0–100%). HSL is easier to reason about when making small color adjustments.

What are complementary colors?

Complementary colors sit directly opposite each other on the color wheel (180° apart in hue). Pairing them creates high contrast and visual vibrancy — for instance, orange and blue, or red and cyan. Analogous colors are adjacent on the wheel (±30°) and produce harmonious, low-contrast palettes. Triadic colors are evenly spaced at 120° intervals and provide balanced, vibrant combinations.

Which color format should I use for web development?

All three formats — hex, RGB, and HSL — are fully supported in modern browsers. Hex (#FF5733) is the shortest and most common in design tools. rgb() is explicit and readable. hsl() is the most intuitive for building consistent design systems because adjusting lightness or saturation is predictable. Use whichever your codebase or design system favors; this tool lets you copy any format instantly.

Hex Color Picker — Free Online Tool

Hex Color Picker Online

Pick any color and instantly get hex, RGB, and HSL codes — free, no signup

Processed locally in your browser

Hex Code

RGB Channels

130

246

HSL Channels

217

Color Preview

Recommended: white text (3.68:1 contrast)

Color Formats

HEX#3B82F6

RGBrgb(59, 130, 246)

HSLhsl(217, 91%, 60%)

Recent Colors

Color Harmonies

Complementary

Analogous

Triadic

Unlock the full toolkit

Batch processing, no ads, higher limits, and API access.

Go Premium

How to Use

1. Click the color swatch or type a hex code to select a color. 2. Drag the RGB or HSL sliders to fine-tune each channel. 3. Click Copy next to HEX, RGB, or HSL to copy the code. 4. Browse Recent Colors to revisit picks. 5. Click Complementary, Analogous, or Triadic swatches for palette ideas.

Features

✓Visual color picker with native browser input
✓Simultaneous HEX, RGB, and HSL display
✓Bidirectional RGB and HSL sliders
✓One-click copy for any color format
✓Recent colors palette — last 10 picks saved
✓Complementary, analogous, and triadic color swatches
✓Text contrast preview on the color swatch
✓Fully client-side — no data leaves your browser

Frequently Asked Questions

What is a hex color code?: A hex color code is a six-character string (e.g. #FF5733) that represents a color in the RGB color model. Each pair of characters encodes the intensity of red, green, and blue on a scale from 00 (0) to FF (255). Hex codes are the most widely used format in HTML, CSS, and design tools.
How do I convert RGB to hex?: To convert RGB to hex, take each channel value (0–255) and convert it to a two-digit hexadecimal number, then concatenate them with a # prefix. For example, rgb(255, 87, 51) becomes #FF5733 because 255 → FF, 87 → 57, and 51 → 33. This tool does the conversion automatically as you adjust the sliders.
What is the difference between HSL and RGB?: RGB (Red, Green, Blue) describes a color by its light component intensities and is how screens physically produce color. HSL (Hue, Saturation, Lightness) is a human-friendly model where Hue is the color angle (0–360°), Saturation controls vividness (0–100%), and Lightness controls brightness from black to white (0–100%). HSL is easier to reason about when making small color adjustments.
What are complementary colors?: Complementary colors sit directly opposite each other on the color wheel (180° apart in hue). Pairing them creates high contrast and visual vibrancy — for instance, orange and blue, or red and cyan. Analogous colors are adjacent on the wheel (±30°) and produce harmonious, low-contrast palettes. Triadic colors are evenly spaced at 120° intervals and provide balanced, vibrant combinations.
Which color format should I use for web development?: All three formats — hex, RGB, and HSL — are fully supported in modern browsers. Hex (#FF5733) is the shortest and most common in design tools. rgb() is explicit and readable. hsl() is the most intuitive for building consistent design systems because adjusting lightness or saturation is predictable. Use whichever your codebase or design system favors; this tool lets you copy any format instantly.