How to Use a Color Picker Online Free — Hex, RGB, HSL (2026)

You can pick colors and convert between hex, RGB, HSL, and named color formats using brevio Color Picker — all conversions happen in your browser. No data is sent anywhere.

How to Use the Color Picker

1. Open brevio Color Picker.
2. Click the color swatch to open the native browser color picker, or type a hex value directly into the input field.
3. Adjust the alpha slider if you need transparency. The RGBA and HSLA values update automatically.
4. Copy any format by clicking the copy button next to hex, RGB, RGBA, HSL, or HSLA.
5. Explore color relationships in the complementary, analogous, and triadic sections below the formats.

Color Formats Explained

Hex (#RRGGBB)

Hex is the most common color format in CSS. Each color channel (red, green, blue) is expressed as a two-digit hexadecimal number from 00 to FF. #000000 is black; #ffffff is white; #ff0000 is pure red. Shorthand hex (#rgb) works when both digits of each channel are identical — #ff6600 shortens to #f60.

Use hex when: copying colors from design tools, working with static CSS stylesheets, or sharing colors with developers who are accustomed to it.

RGB (red, green, blue)

RGB uses three integers from 0 to 255. It maps directly to screen hardware — monitors mix these three light channels to produce every visible color. rgb(255, 0, 0) is pure red; rgb(0, 128, 0) is green at half brightness. Modern CSS also accepts rgb(255 0 0) without commas (CSS Color Level 4 syntax).

Use RGB when: doing math on color values, working with canvas drawing APIs, or specifying colors programmatically in JavaScript.

HSL (hue, saturation, lightness)

HSL is the most intuitive format for design work. Hue is an angle on the color wheel (0°–360°): 0° is red, 120° is green, 240° is blue. Saturation (0%–100%) controls how vivid the color is — 0% is grey, 100% is fully saturated. Lightness (0%–100%) controls brightness — 0% is black, 100% is white, 50% is the “pure” hue.

Use HSL when: creating color variations by adjusting lightness or saturation while keeping the same hue, building design systems with consistent tonal scales, or generating complementary colors programmatically.

RGBA and HSLA

Adding an alpha channel (a) allows transparency. Alpha ranges from 0 (fully transparent) to 1 (fully opaque). rgba(0, 0, 0, 0.5) is 50% transparent black. Use RGBA or HSLA when: overlaying colors on backgrounds, creating glass-morphism effects, or building UI elements that let content show through.

Color Theory Basics

Complementary Colors

Complementary colors sit opposite each other on the color wheel (180° apart in hue). They create maximum contrast when placed together. Red and cyan, blue and orange, yellow and violet are classic complementary pairs. Use complementary colors for call-to-action buttons against a background, or to make text stand out on a colored surface.

Analogous Colors

Analogous colors are adjacent on the color wheel (±30° in hue). They create a harmonious, low-contrast palette that feels cohesive and natural. Blue, blue-violet, and violet are analogous. Use analogous colors for backgrounds, gradients, and brand palettes where you want visual consistency without tension.

Triadic Colors

Triadic colors are evenly spaced around the color wheel (120° apart). They create vibrant, balanced palettes. Red, yellow, and blue form the primary triadic set. Triadic schemes work well when you need visual variety without complementary tension — useful for infographics, dashboards, and data visualisation.

Accessibility and Color Contrast

When choosing text and background color pairs, check the contrast ratio against WCAG 2.1 guidelines: at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). Low contrast is the most common accessibility failure in web design. The brevio Contrast Checker tests WCAG AA and AAA compliance for any color pair.

CSS Custom Properties and Color Systems

Modern design systems define colors as CSS custom properties (variables): --color-primary: #3b82f6;. This makes it easy to update a color across an entire application by changing one variable. When building a color system, define a semantic scale (primary-100 through primary-900) in HSL, varying only the lightness value. This produces a consistent tonal range that works for both light and dark modes.