BN Web Tools – Handy Online Tools & Utilities

Color Picker+Color Converter

Pick any color visually and convert between HEX, RGB, and HSL instantly. Includes shade generator, palette builder, and WCAG contrast checker.

Selected Color
#4F46E5
HEX
RGB
HSL
CSS
Shade Generator
Color Harmony
WCAG Contrast Checker
—
—
Text on White
Sample text showing readability on white background
—
—
Text on Dark
Sample text showing readability on dark background
Recent Colors
Pick colors to see them here

Why use this Color Picker?

Choosing the right color is an important part of web design, graphic design, and development. You may see a color on a website and need its exact value for your own project, or you may already have a brand color and want to create lighter, darker, or matching variations.

This Color Picker brings those common tasks together in one place. You can select a color visually, enter a specific value, view the color in different formats, create shade variations, explore color harmonies, and check contrast for better readability.

It supports common formats such as HEX, RGB, HSL, and CSS, so you can copy the value you need without manually converting the color between formats.

How to use the Color Picker

  1. Click or drag inside the saturation/value box to select the color you want.
  2. Move the hue slider to change the main color and explore different color ranges.
  3. Use the alpha slider when you need to adjust transparency.
  4. Check the selected color's values in HEX, RGB, HSL, or CSS format.
  5. Click the Copy button beside any color value to copy it for use in your project.
  6. Explore the available shades when you need lighter or darker versions of the selected color.
  7. Use the color harmony options to find complementary or related colors for your design.
  8. Check the contrast result against a light or dark background when choosing colors for text and interface elements.

An example

Suppose your website's main brand color is #4F46E5. Enter the HEX value into the picker, and the tool will display the corresponding RGB and HSL values.

You can then explore lighter and darker shades for buttons, backgrounds, borders, or hover states. If you're choosing text colors, use the contrast checker to see whether the selected combination provides enough readability.

Once you find the color you need, simply copy its HEX, RGB, HSL, or CSS value and use it in your website, design software, or development project.

Color Picker+Color Converter – FAQ

The conversions use the standard formulas used by CSS, design tools, and browsers. HEX, RGB, and HSL values are mathematically interchangeable — you'll get the same color across all three formats. Rounding may cause the display value to differ by ±1 in the last digit, which is imperceptible to the human eye.
HEX represents colors as a six-digit hexadecimal code (e.g., #4F46E5) — compact and widely supported. RGB uses red, green, and blue values from 0–255 — more intuitive for programming. HSL uses hue, saturation, and lightness — best for adjusting colors logically, like making a shade darker or less saturated.
It creates 10 variants of your color from very light (50) to very dark (900), following the same naming convention used by Tailwind CSS and Material Design. Click any shade to switch to it. This is perfect for building cohesive design systems where you need a full range of tones from a single brand color.
Color harmonies are combinations of colors that look good together because of their relationship on the color wheel. Complementary uses opposite colors, Analogous uses neighbors, Triadic uses three colors evenly spaced, Tetradic uses four, and Monochromatic uses different shades of the same hue. Each is useful for different design contexts.
It calculates the WCAG contrast ratio between your color and both white and dark backgrounds. WCAG defines three levels: AA requires 4.5:1 for normal text and 3:1 for large text, and AAA requires 7:1 for normal text and 4.5:1 for large text. If your color meets the threshold, the badge shows PASS; otherwise, it warns you. This is essential for accessibility compliance.
Yes. Use the alpha slider below the hue bar to add transparency. All output formats adjust automatically — HEX becomes #RRGGBBAA, RGB becomes rgba(), and HSL becomes hsla(). The preview swatch shows your color over a checkered pattern so transparency is visible.
Yes, the last 20 colors you've picked are shown in the "Recent Colors" section at the bottom. Click any swatch to return to that color. This history resets when you reload the page — it's designed for convenience within a single session.
Yes, completely. Everything runs in your browser with no external dependencies. You can disconnect from the internet and it will still work perfectly. Nothing is uploaded or tracked.
See All Tools