How does hex color notation work?

Hex uses the format #RRGGBB where each pair is a hexadecimal value from 00 to FF (0-255 in decimal). The pairs represent red, green, and blue intensity. #000000 = no color (black). #FFFFFF = full color on all channels (white). #FF0000 = full red, no green, no blue (pure red). You can also use shorthand: #F00 = #FF0000.

RGB stands for Red, Green, Blue. Each channel has a value from 0 to 255. rgb(0, 0, 0) = black (no light). rgb(255, 255, 255) = white (full light). rgb(255, 0, 0) = red. The higher the number, the more of that color. Mixing channels creates other colors: rgb(255, 255, 0) = yellow (red + green at full intensity).

HSL stands for Hue, Saturation, Lightness. Hue is the color on a wheel (0-360 degrees: 0=red, 120=green, 240=blue). Saturation is intensity (0%=gray, 100%=vivid). Lightness is brightness (0%=black, 50%=pure color, 100%=white). HSL is the most intuitive for humans — you can darken a color by lowering lightness without changing the hue.

How do I find the color code of something on a website?

Right-click the element > Inspect (or press F12). In the Elements panel, look at the Styles section for color, background-color, or border-color properties. The hex, RGB, or HSL value is right there. You can also click the color swatch in DevTools to open Chrome's built-in color picker.

How do I find the color code from an image or logo?

Upload the image to a color extractor tool. Our Color Extractor lets you upload any PNG, JPG, or screenshot and click anywhere on the image to get the exact color in hex, RGB, and HSL. This is how you match brand colors from a logo file.

How do I convert between hex, RGB, and HSL?

Enter any color value into our Color Picker and all three formats appear instantly. Or use the Hex-RGB Converter for quick conversions. The math: hex FF = decimal 255 = RGB max value. hsl(0, 100%, 50%) = rgb(255, 0, 0) = #FF0000.

What color format should I use for CSS?

Hex (#3B82F6) is the standard for most CSS. Use HSL when building a theme with color variations — you can create lighter/darker versions by changing the lightness value. Use RGB when you need alpha transparency: rgba(59, 130, 246, 0.5) for 50% opacity.

Can I get a color code from a PDF?

Not directly from the PDF viewer. Take a screenshot of the color you want, then upload it to our Color Extractor and click on the color. Alternatively, if the PDF was created from a design file, ask the designer for the exact hex code from the source file.

How to Find Any Color Code — Hex, RGB & HSL Explained Simply

Last updated: April 20267 min readColor Tools

Every color on a screen has three codes: hex, RGB, and HSL. They all describe the same color — just in different number systems. Here's how each works, when to use which, and how to find the code for any color you see.

The Three Color Formats

Hex — The Web Standard

Hex codes start with # followed by 6 characters (0-9 and A-F). The format is #RRGGBB — two characters each for red, green, and blue intensity.

Hex Value	Decimal Equivalent	Meaning
00	0	None of this color channel
80	128	Half intensity
FF	255	Full intensity

So #FF5733 means: full red (FF=255), moderate green (57=87), some blue (33=51). The result is a burnt orange.

RGB — The Design Tool Standard

RGB uses three decimal numbers from 0 to 255: rgb(red, green, blue). It's the same information as hex, just in base-10 instead of base-16.

RGB Value	Color	Why
rgb(255, 0, 0)	Pure red	Max red, no green, no blue
rgb(0, 255, 0)	Pure green	No red, max green, no blue
rgb(0, 0, 255)	Pure blue	No red, no green, max blue
rgb(255, 255, 0)	Yellow	Max red + max green = yellow
rgb(255, 255, 255)	White	All channels at maximum
rgb(128, 128, 128)	Medium gray	All channels equal = gray

HSL — The Human-Friendly Format

HSL describes color the way humans think about it: hsl(hue, saturation, lightness).

Hue (0-360): The color on a wheel. 0=red, 60=yellow, 120=green, 180=cyan, 240=blue, 300=magenta
Saturation (0-100%): How vivid. 0%=gray, 100%=pure color
Lightness (0-100%): How bright. 0%=black, 50%=normal, 100%=white

Why HSL matters for developers: To make a button hover state darker, just lower the lightness by 10%. With hex or RGB, you'd need to calculate new values for all three channels. HSL makes color math intuitive.

How to Find a Color Code — 5 Methods

Method 1: Use a Color Picker

Open Color Picker, select a color visually from the wheel or spectrum, and get hex, RGB, and HSL codes instantly. Best for: choosing new colors for a design or project.

Method 2: Inspect a Website

Right-click any element on a webpage > Inspect (F12). In the Styles panel, find the color property. The hex/RGB/HSL code is displayed directly. Click the color swatch to open Chrome's built-in picker for that value.

Method 3: Extract from an Image

Upload a logo, screenshot, or photo to Color Extractor. Click anywhere on the image to get the exact color code. Best for: matching brand colors from a logo file or design mockup.

Method 4: Convert a Known Value

Have an RGB value but need hex? Type it into the Hex-RGB Converter or the Color Picker and all formats appear. Works in any direction: hex to RGB, RGB to HSL, HSL to hex.

Method 5: Desktop Eyedropper

Mac: Digital Color Meter (built-in, Applications > Utilities). Windows: PowerToys Color Picker (Win+Shift+C). These sample any pixel on your screen in real-time.

Common Brand & Framework Colors

Color	Hex	RGB	Use Case
Tailwind Blue-500	#3B82F6	rgb(59, 130, 246)	Default blue in Tailwind CSS
Bootstrap Primary	#0D6EFD	rgb(13, 110, 253)	Bootstrap 5 primary blue
Material Design Indigo	#3F51B5	rgb(63, 81, 181)	Google Material Design
GitHub Dark BG	#0D1117	rgb(13, 17, 23)	GitHub dark mode background
Slack Aubergine	#4A154B	rgb(74, 21, 75)	Slack brand purple
Spotify Green	#1DB954	rgb(29, 185, 84)	Spotify brand green

Build a Full Color System

Pick your primary color: Color Picker
Generate complementary colors: Palette Generator
Verify accessibility: Color Contrast Checker — test every text/background combination
Create gradients: CSS Gradient Generator
Set up meta tags: Meta Tag Generator — theme-color meta for mobile browsers

Find any color code — hex, RGB, HSL. Instant conversion.

Open Color Picker