Ctrl + K
Home›Colors Tools›HEX Color Picker
Free Developer Tool

HEX Color Picker

Choose a color visually and get its HEX, RGB and HSL values instantly.

HEX Color
Color Values
HEX#6366F1
RGBrgb(99, 102, 241)
HSLhsl(239°, 84%, 67% )

What is HEX Color Picker?

Choose a color using a visual color picker and instantly get its HEX representation along with equivalent RGB and HSL values. Use the selected color directly in CSS, design tools and web projects.

How to use

  1. Choose a color using the color picker.
  2. Adjust the color or enter a HEX value.
  3. Review the generated color values.
  4. Copy the HEX, RGB or HSL value.

Features

  • Visual color selection
  • HEX value editing
  • RGB and HSL conversion
  • Color value copying

Common Use Cases

  • Web design
  • CSS development
  • UI design
  • Brand color selection

Example

Input
#3498DB
Output
HEX: #3498DB
RGB: rgb(52, 152, 219)
HSL: hsl(204, 70%, 53%)

FAQ

Can I enter a HEX value directly?

Yes.

Does it show RGB and HSL values?

Yes.

Can I copy the selected color?

Yes.

Related Tools

Color Converter

Convert HEX, RGB and HSL colors.

RGB Color Picker

Pick colors using RGB values.

HSL Color Picker

Pick colors using HSL values.

Color Contrast Checker

Check contrast between two colors.

Color Shades Generator

Generate lighter and darker shades of a color.

Related Articles

HEX vs RGB vs HSL

Compare HEX, RGB and HSL color formats, understand their strengths and discover which is best for different design and development tasks.

WCAG Color Contrast Guide

Understand WCAG contrast ratios, accessibility requirements and practical techniques for creating readable and inclusive user interfaces.

How CSS Accent Color Works

Understand the CSS accent-color property, learn which form controls it affects and discover best practices for accessible interface design.