DevHive

Color Picker

Pick a colour and get HEX, RGB, HSL values

#3B82F6
RGB
R
G
B
HSL
H
S
L
Shades
CONTRAST
White text
Black text

Recommended: white text on this background

How to Use Color Picker

  1. 1

    Click anywhere on the colour wheel or gradient to select a colour.

  2. 2

    Fine-tune the value using the hue, saturation, and lightness sliders.

  3. 3

    Copy the colour in HEX, RGB, or HSL format from the output fields.

About Color Picker

Pick any colour and instantly get its HEX, RGB, and HSL values. Adjust with visual sliders, explore shades, and check contrast. Free online colour picker.

Best Use Cases

  • •Selecting and fine-tuning colors for a web design project
  • •Getting HEX, RGB, and HSL values for a specific color
  • •Exploring color shades and tints for a brand palette
  • •Checking color contrast between foreground and background
  • •Picking colors from a visual slider to find the right tone

Examples

Brand color

Use the color wheel to find your ideal brand color. Copy the HEX value for your CSS and style guide.

Shade exploration

Pick a base color and browse lighter and darker shades to find the right variant for hover states or backgrounds.

Multi-format

Select any color and instantly get its HEX, RGB, and HSL values for use in different tools and platforms.

Common Mistakes to Avoid

  • !Picking colors on an uncalibrated monitor and getting unexpected results on other screens
  • !Choosing highly saturated colors that cause accessibility issues with text contrast
  • !Not saving selected colors, then losing the exact shade after closing the tool

Limitations

  • –Colors display differently across monitors, browsers, and color profiles
  • –Cannot pick colors from external images or screenshots
  • –Does not include CMYK values for print design use cases

Frequently Asked Questions

What is the difference between HEX, RGB and HSL?

HEX is a 6-digit code used in CSS (#3B82F6). RGB defines colours as red, green, blue values (0–255). HSL defines them as hue (0–360°), saturation (%), and lightness (%) - often more intuitive for adjusting colours.

How do I check if text is readable on my colour?

The contrast section at the bottom shows white and black text on your chosen background and recommends the more readable option.