Color Picker

Pick any color using the visual picker or type a HEX code. Instantly get HEX, RGB, RGBA, HSL, and HSLA values with one-click CSS snippets.

#6C63FF

rgb(108, 99, 255)

R
108
G
99
B
255
tagHEX#6C63FF
paletteRGBrgb(108, 99, 255)
opacityRGBArgba(108, 99, 255, 1.00)
tuneHSLhsl(243, 100%, 69%)
tuneHSLAhsla(243, 100%, 69%, 1.00)
CSS Snippet
color: rgba(108, 99, 255, 1.00);
background-color: #6C63FF;
border-color: #6C63FF;
/* HSL */
color: hsla(243, 100%, 69%, 1.00);
rotate_right

243°

Hue

water_drop

100%

Sat

light_mode

69%

Light

How It Works

Use the native color picker or type a HEX code directly into the input field. Drag the RGB sliders to fine-tune each channel, and use the opacity slider to control transparency. All output values — HEX, RGB, RGBA, HSL, HSLA — update instantly in real time.

Supported color formats:

  • HEX — e.g. #6C63FF — used in CSS and design tools
  • RGB — e.g. rgb(108, 99, 255) — red, green, blue channels (0–255)
  • RGBA — e.g. rgba(108, 99, 255, 0.80) — RGB with opacity
  • HSL — e.g. hsl(244, 100%, 69%) — hue, saturation, lightness
  • HSLA — HSL with an added alpha/opacity channel
colorize

Full Color Picker

Use the native browser color picker or type any HEX code directly. RGB sliders let you fine-tune each channel with precision.

opacity

Opacity Control

Adjust the alpha/opacity slider to generate RGBA and HSLA values ready for use in CSS transparent overlays and backgrounds.

content_copy

CSS-Ready Output

Every color value — HEX, RGB, RGBA, HSL, HSLA — has a one-click copy button. A full CSS snippet is always ready to paste directly into your code.

Where to Use This Tool

codeWeb Development

  • • Copy HEX, RGB, or HSL directly into CSS
  • • Use RGBA for transparent overlays and shadows
  • • Match brand colors across different formats
  • • Quickly get CSS snippet for any color

brushUI & Graphic Design

  • • Convert Figma or Sketch hex codes to RGB
  • • Check exact color values from style guides
  • • Pick and preview colors before applying
  • • Verify hue, saturation, and lightness values

photo_cameraContent Creation

  • • Get accurate hex codes for Canva or Adobe
  • • Match colors across thumbnails and banners
  • • Set consistent brand colors for social posts
  • • Use HSLA for layered transparent effects

schoolLearning & Exploration

  • • Understand how RGB channels mix to form colors
  • • See how opacity changes color appearance
  • • Learn the difference between HSL and RGB
  • • Explore color theory hands-on and interactively