🎨 Utility Tools

Color Picker

Pick any color and instantly get HEX, RGB, HSL values. Explore shades, tints, and color harmonies.

#EC4899
RGB Sliders
Red (R)236
Green (G)72
Blue (B)153
HEX
#EC4899
click to copy
RGB
rgb(236, 72, 153)
click to copy
HSL
hsl(330, 81%, 60%)
click to copy
RGBA (100%)
rgba(236, 72, 153, 1)
click to copy
CSS Variable
--color: #EC4899;
click to copy
Tailwind-style
text-[#EC4899]
click to copy
Shades & Tints
Color Harmonies

🎨 Understanding Color Formats

Colors in web design and digital media can be expressed in several formats. Each has its strengths depending on the context.

HEX (Hexadecimal)

The most common format for web development. Written as #RRGGBB where each pair of characters represents Red, Green, Blue values in base-16 (0–FF). Example: #EC4899 = R:236, G:72, B:153.

RGB (Red, Green, Blue)

Specifies colors by mixing red, green, and blue light, each from 0–255. Used in CSS as rgb(R, G, B). Ideal when you need to manipulate individual color channels programmatically.

HSL (Hue, Saturation, Lightness)

A more intuitive format. Hue is the color wheel angle (0–360°), Saturation is intensity (0–100%), and Lightness is brightness (0–100%). Makes it easy to create shades and tints by adjusting only the lightness.

How to Use This Tool

  • Use the color picker or type a HEX code directly.
  • Adjust RGB sliders for fine-tuned control.
  • Click any format card to copy that color code to your clipboard.
  • Explore shades and tints — perfect for design systems.
  • Use Color Harmonies to find colors that work well together.

Color Harmony Types

  • Complementary: Opposite on the color wheel — creates high contrast and energy.
  • Analogous: Adjacent on the color wheel — creates harmony and unity.
  • Triadic: Three evenly spaced colors — vibrant and balanced.
  • Split-Complementary: A variation of complementary, offering softer contrast.