Home About Contact
Back to Home

Color Picker & Converter

Pick colors and convert between HEX, RGB, and HSL formats.

Pick a Color
Palette
Shades
Tints
CSS variables
--color-primary: #8b5cf6;

Overview

Pick colors and convert between HEX, RGB, and HSL.

Best for

  • Match brand colors across assets.
  • Check contrast for UI text.
  • Build a tint/shade scale for a UI theme.

Step-by-step

  1. Select a color or enter a value.
  2. Adjust hue, saturation, or lightness.
  3. Copy the desired format.

Examples

Example 1
Input
#FF6A00
Output
rgb(255, 106, 0)
HEX converted to RGB.
Example 2
Input
hsl(210, 50%, 40%)
Output
#336699
HSL converted to HEX.
Example 3
Input
rgb(12, 99, 200)
Output
#0C63C8
RGB converts to HEX.

Common mistakes

  • Very light colors reduce contrast.
  • Different color profiles can shift values.
  • Missing the # makes HEX invalid in CSS.

Pro tips

  • Check contrast ratios for accessibility.
  • Save a palette for consistency.

FAQ

Why do values round?
Color conversions use rounding, so small differences are normal.
Does this upload my data?
No. Everything runs locally in your browser.
Can I use it offline?
Yes. After the page loads, most tools work offline. Some assets (like fonts) may need a connection.

Data & privacy

All processing happens locally in your browser. No data is uploaded or stored.