Online Color Picker

Pick a color and get its HEX, RGB, HSL, and HWB values instantly. This free online color picker is designed for quick use in the browser, with no download or account required.

Use the main picker when you only need a color code, or switch to the other tools to save colors, generate related palettes, inspect colors used on a website, and check foreground/background combinations for WCAG contrast.

Saved Colors

How to Use the Online Color Picker

Start by selecting a color in the picker. As the color changes, the corresponding HEX, RGB, HSL, and HWB values update automatically.

If you already know the HEX value you want, you can type it directly into the HEX field instead. Use Copy HEX to copy the color code to your clipboard, or choose Save Color to keep it in your saved-color list while you work.

The other tabs offer more useful features:

  • Color Palettes generates related colors from your current selection.
  • Website Colors extracts CSS colors from a public webpage.
  • Contrast Checker compares foreground and background colors against common WCAG contrast requirements.

You can move between the tools without losing the colors you have saved.

More Than a Simple Color Picker

Sometimes all you need is a simple color picker that gives you a HEX code. Other times, selecting the color is only the first step.

The Upclimb color tool keeps the basic picker straightforward while adding a few related tasks in the same interface.

Pick and Copy a Color

Choose a color visually or enter a HEX value, then copy its HEX, RGB, HSL, or HWB representation.

Save Colors While You Work

Saved colors remain available in the panel beside the tool so you can compare or reuse them without keeping a separate list.

Build Related Color Palettes

Generate complementary, analogous, triadic, split-complementary, and tetradic combinations from a selected color.

Inspect Website Colors

Enter the URL of a public webpage to find color values defined in its HTML and stylesheets.

Check Accessible Contrast

Compare a foreground and background color and see which WCAG text and interface contrast thresholds the combination meets.

The goal is to keep the first interaction as simple as a standard HEX color picker while making the next common steps available in the same place.

HEX, RGB, HSL and HWB Color Formats

A single digital color can be written in several different formats. The picker displays four common formats used in web design and CSS.

Format Example Description
HEX #2764E7 Represents red, green, and blue channels using hexadecimal values.
RGB rgb(39 100 231) Represents the amount of red, green, and blue used to display the color.
HSL hsl(221 80% 53%) Describes the color using hue, saturation, and lightness.
HWB hwb(221 15% 9%) Describes hue along with the amount of whiteness and blackness in the color.

HEX and RGB are closely related. A six-digit HEX color contains three pairs of hexadecimal values representing the red, green, and blue channels.

For example:

#2764E7

corresponds approximately to:

rgb(39 100 231)

HSL and HWB describe the same color from a different perspective. They can be easier to work with when you want to change properties such as hue or lightness rather than individual RGB channels.

There is no single color format that is always best. HEX is compact and widely used in CSS and design handoffs. RGB is useful when working directly with screen color channels. HSL and HWB can be more intuitive when adjusting a color systematically.

Create Complementary and Harmonious Color Palettes

The Color Palettes mode generates color relationships from the base color you select.

The available palette types include:

  • Complementary: the base color and the hue opposite it on the color wheel.
  • Analogous: neighboring hues that tend to create a more closely related palette.
  • Triadic: three hues distributed around the color wheel.
  • Split-complementary: the base color plus the two hues adjacent to its complement.
  • Tetradic: four hues arranged as two complementary relationships.

You can copy an individual palette color, save it to your color list, or use it as the new base color.

Color-harmony formulas are useful starting points, but they do not determine whether a finished design will work well on their own. Saturation, lightness, contrast, surrounding content, brand requirements, and the proportions in which the colors are used all affect the final result.

For website work, it is usually worth checking important foreground and background combinations separately for contrast after creating a palette.

Check Color Contrast for Accessible Web Design

Readable color combinations are especially important for text, controls, icons, and other interface elements.

The Contrast Checker compares a foreground color with a background color and calculates their contrast ratio. It then evaluates the pair against several WCAG contrast thresholds.

Check Minimum Contrast
WCAG AA — normal text 4.5:1
WCAG AA — large text 3:1
WCAG AAA — normal text 7:1
WCAG AAA — large text 4.5:1
Non-text interface elements 3:1

Under WCAG guidance, large text generally means text at least 18 point regular or 14 point bold, commonly approximated as 24 CSS pixels regular or about 18.7 CSS pixels bold.

The contrast checker also provides nearby color suggestions when a pair does not meet the selected target. These suggestions are intended to reduce the amount a color has to change while still reaching the required contrast ratio.

A passing result applies only to the colors being tested. It does not mean that a complete webpage or interface is WCAG compliant. Accessibility also depends on structure, keyboard behavior, labels, focus states, alternative text, motion, and many other factors that are outside the scope of a color contrast checker.

For gradients, photographs, and other variable backgrounds, test the text against the area with the lowest usable contrast behind it rather than relying on a single average background color.

How the Website Color Grabber Works

The Website Colors mode is intended for inspecting colors defined in the code of a public webpage.

Enter a URL and the tool checks the submitted page along with a limited number of directly linked stylesheets. It looks for CSS color values used in places such as text colors, backgrounds, borders, gradients, custom properties, inline styles, and SVG styling.

The results are normalized into reusable color values and ranked so commonly or prominently defined colors are easier to find.

The scanner is deliberately limited. It does not crawl an entire website, execute the remote website’s JavaScript, download all of its assets, or attempt to reproduce every pixel of the rendered page.

This also means that an extracted color should not automatically be interpreted as a site’s “dominant” visual color. A value may appear several times in CSS while occupying very little visible space, and colors contained only inside photographs may not appear in the results at all.

The feature is most useful for inspecting an existing CSS color system, reviewing brand colors, researching a redesign, or finding a color value that has already been defined on a webpage.

How This Tool Works — In Depth

The basic controls are intended to work without any technical knowledge. The sections below document some of the calculations and processing used behind the interface for developers, educators, accessibility reviewers, and anyone who wants to understand where the results come from.

How does the color picker convert HEX, RGB, HSL and HWB?

The picker works from a single selected color and represents that color in several formats.

HEX and RGB

A six-digit HEX value is made from three two-character hexadecimal numbers:

#RRGGBB

For example:

#2764E7

can be separated into:

27 — red
64 — green
E7 — blue

Each pair is written in base 16 rather than base 10.

Converted to decimal:

0x27 = 39
0x64 = 100
0xE7 = 231

The equivalent RGB color is therefore:

rgb(39 100 231)

RGB channels normally range from 0 to 255.

HSL

HSL describes a color using:

Hue — a position around a 360-degree color wheel.
Saturation — how far the color is from a neutral gray.
Lightness — how light or dark the color is.

The RGB channels can be normalized and compared mathematically to determine hue, saturation, and lightness.

HWB

HWB uses the same hue concept but describes the remaining color using whiteness and blackness.

For RGB values on the 0–255 scale, the whiteness component can be derived from the smallest RGB channel:

Whiteness = min(R, G, B) / 255

Blackness is derived from the largest RGB channel:

Blackness = 1 − max(R, G, B) / 255

The percentages are then combined with the hue to form the HWB representation.

These formats are different descriptions of the same displayed sRGB color rather than separate colors.

How are complementary, analogous and other palettes generated?

The palette generator uses the hue of the selected color as a starting point.

Hue can be represented as an angle from 0° to 360°. Related palette colors are created by rotating that hue by predetermined amounts while keeping the original saturation and lightness.

The current palette relationships are:

Palette Hue Offsets
Complementary 0°, 180°
Analogous −60°, −30°, 0°, +30°, +60°
Triadic 0°, 120°, 240°
Split-complementary 0°, 150°, 210°
Tetradic 0°, 60°, 180°, 240°

For example, suppose the base color has a hue of 220°.

Its complementary color is calculated by adding 180°:

220° + 180° = 400°

Because the color wheel ends at 360°, the value wraps around:

400° − 360° = 40°

The resulting complementary hues are therefore approximately:

220° and 40°

The same principle is used for the other palette types.

These relationships are mathematical color-wheel relationships. They are not a guarantee that every generated palette will be appropriate for every project. Contrast, lightness, saturation, accessibility, and context still need to be considered.

How does the WCAG contrast checker calculate the contrast ratio?

The checker does not compare HEX values directly. It calculates the relative luminance of each displayed color and then compares the two luminance values.

1. Normalize the RGB Channels

Each RGB channel is converted from the usual 0–255 range to a number between 0 and 1.

For example:

128 / 255 ≈ 0.502

2. Convert sRGB Values to Linear RGB

Each normalized red, green, and blue channel is linearized.

For a channel value C:

If:

C ≤ 0.04045

then:

Clinear = C / 12.92

Otherwise:

Clinear = ((C + 0.055) / 1.055)^2.4

3. Calculate Relative Luminance

The linear red, green, and blue channels are weighted according to their contribution to perceived luminance:

L = 0.2126R + 0.7152G + 0.0722B

This produces a relative luminance value for each color.

4. Calculate the Contrast Ratio

The lighter color is assigned L1 and the darker color L2.

The contrast ratio is then:

(L1 + 0.05) / (L2 + 0.05)

Contrast can range from 1:1 for colors with the same luminance to 21:1 for black against white.

5. Compare the Result With the Selected Standard

The full calculated value is used for the pass/fail test.

The displayed number may be shortened for readability, but the tool does not round a failing result upward. For example, a calculated result of 4.499:1 does not satisfy a 4.5:1 requirement.

Transparent Colors

If a color contains transparency, the visible result depends on the color behind it.

The checker first composites a transparent foreground over its background. If the background is also transparent, an underlying canvas color is used to determine the effective displayed colors before contrast is calculated.

Suggested Passing Colors

When a pair fails, the tool can search for nearby colors that reach a selected threshold while attempting to preserve the appearance of the original color as closely as practical.

These suggestions are separate from the WCAG calculation itself. Whether a color passes is always determined from the contrast ratio.

How does website color extraction work?

When a public URL is submitted, the request is processed through the Upclimb WordPress site rather than attempting to read the remote page directly from the visitor’s browser.

The basic process is:

URL → HTML → stylesheets → color candidates → normalized results

The scanner retrieves the submitted HTML page and identifies inline CSS, style attributes, SVG styling, and a limited number of linked stylesheets.

It then looks for recognizable CSS color values and records where they occur.

Equivalent values can be normalized so that colors written in different supported CSS formats can be shown in a consistent form.

The scan is intentionally bounded. It does not:

  • Crawl links to other pages
  • Execute remote JavaScript
  • Access private network addresses
  • Fetch an unlimited number of stylesheets
  • Download every image or media file
  • Measure the rendered pixel area occupied by each color

Request size, stylesheet count, execution time, caching, and request frequency are limited to keep the feature lightweight and reduce unnecessary traffic to other websites.

Because this is CSS-based extraction rather than screenshot analysis, the results describe colors found in the page’s code rather than an exact visual inventory of every color a visitor might see.

Free, Browser-Based and No Account Required

The Upclimb online color picker is free to use and runs directly in a web browser. There is no software to install and no account is required to use the picker, palette generator, website color grabber, contrast checker, or saved-color panel.

Saved colors are stored locally in your browser rather than in an Upclimb user account. That makes it possible to keep a working list of colors without signing in, but it also means the list does not automatically sync between browsers or devices.

Clearing browser storage may remove saved colors. Private or incognito browsing can also limit how long local browser storage remains available.

Website-color extraction is the exception to the otherwise client-side workflow because a browser normally cannot directly read the HTML and stylesheets of unrelated websites. Those scans are sent through a limited server-side request process described above.

About the Upclimb Color Tool

The Upclimb Color Tool is a free set of browser-based utilities for selecting, comparing, saving, and inspecting digital colors.

Tool type Online color and color-accessibility utility
Cost Free
Account required No
Download required No
Color formats HEX, RGB, HSL, HWB
Palette types Complementary, analogous, triadic, split-complementary, tetradic
Contrast checks WCAG AA, AAA, large text and non-text color contrast
Website scan scope One public page and a limited number of linked stylesheets
Saved colors Stored locally in the visitor’s browser
Developer Upclimb
Last updated August 2026

The tool is intended as a practical web-design and development resource. Its accessibility features evaluate color contrast only and should not be treated as a complete website accessibility audit.

Technical questions, bugs, or incorrect results can be reported through the Upclimb contact page.

Who Can Use This Color Picker?

The tool is designed to be general enough for anyone working with digital color.

Web Designers

Web designers can pick colors, develop palettes, inspect existing website colors, and test foreground/background combinations before applying them to a design.

Front-End Developers

Front-end developers can copy color codes for CSS and compare HEX, RGB, HSL, and HWB representations of the same color.

Students and Educators

Students and educators can use the picker to explore color formats, hue relationships, and the mathematics behind WCAG contrast.

Marketing and Brand Teams

Marketing and brand teams can keep a working list of brand colors, compare website palettes, and share exact color values with designers or developers.

For someone who only needs to pick a color and copy a color code, the main picker can be used without opening any of the additional modes.

Frequently Asked Questions

What is an online color picker?

An online color picker is a browser-based tool for selecting a digital color and viewing its numerical color values. The Upclimb picker displays HEX, RGB, HSL, and HWB values and also includes tools for saving colors, generating palettes, extracting website colors, and checking contrast.

How do I copy a HEX color code?

Pick a color in the main tool and select Copy HEX. The current HEX value will be copied to your clipboard. You can also copy colors individually from saved colors, generated palettes, and website-color results.

What is the difference between HEX and RGB?

Both HEX and RGB can describe the same sRGB color. RGB uses decimal red, green, and blue channel values, normally between 0 and 255. HEX represents those same channels using hexadecimal values from 00 to FF.

For example, #2764E7 and rgb(39 100 231) describe the same color.

What are HSL and HWB colors?

HSL describes a color using hue, saturation, and lightness. HWB uses hue, whiteness, and blackness. Both provide alternatives to working directly with red, green, and blue channel values and are supported in modern CSS.

Can I save colors without creating an account?

Yes. Saved colors are stored in local browser storage, so no Upclimb account is required. Because the colors are stored locally, they will not automatically appear on another device or browser.

Can I find the colors used on another website?

Yes. The Website Colors mode can inspect the HTML and directly linked CSS of a public webpage and return supported color values it finds.

The tool does not perform a complete site crawl or pixel-based screenshot analysis, so results may differ from the complete set of colors visible on the rendered webpage.

What contrast ratio should website text have?

For WCAG AA, normal text generally requires at least 4.5:1 contrast and large text requires at least 3:1. WCAG AAA uses higher thresholds of 7:1 for normal text and 4.5:1 for large text.

Color contrast is only one part of web accessibility.

Is this color picker free?

Yes. The online color picker and its current modes are free to use in the browser, with no download or account required.

Listed on CSSAWWWARDS