HTML Color Code Converter

Convert between HEX, RGB, HSL, and CSS named colors with a live swatch preview.
Color Input
Click the swatch to pick a color
#
0 (transparent) 100 (opaque)
Copied !
Color Preview
White text
Black text
Tints & Shades
Quick Presets

Features

  • Color Picker: Visual circular color picker for intuitive color selection.
  • All Formats: HEX, RGB, RGBA, HSL, and CSS named color.
  • RGB Sliders: Fine-tune red, green, and blue channels with sliders.
  • Opacity/Alpha: Control transparency and get the RGBA value.
  • Tints & Shades: 9 automatically generated lighter/darker variations.
  • Copy Any Format: One-click copy for each color format.
  • Quick Presets: Common Bootstrap and Material Design colors.

How to Use

  1. Pick: Click the color circle to open the system color picker, or type a HEX value.
  2. Adjust: Use the RGB sliders or alpha slider to fine-tune.
  3. Copy: Click the copy icon next to any format to copy it.
  4. Explore: Click any shade or preset swatch to apply it as the current color.