CSS Color Tool

main

This CSS color tool allows you to experiment with various different colors and see different CSS representations of those colors. Updating any of the input values will update the others for the color represented by the corresponding type of value. You can input any of:

  • A hex color code: # followed by six hexadecimal characters.
  • RGBA: three values of 255 and an alpha transparency value between 0 and 1.
  • HSLA: a hue, which is a number between 0 and 359, a saturation between 0 and 100, a lightness between 0 and 100, and an alpha transparency value between 0 and 1.
  • Keyword: A CSS color keyword which is all lowercase letters.

A color picker is also available for browsers that support it. Additionally, buttons are available where supported to copy color representations to the clipboard. You can also paste in a color representation. For example, try pasting rgba(255,99,71,1) into any of the RGBA inputs. This will normalize to the RGBA values in the corresponding inputs and update all of the other colors.

There are also buttons available to manipulate the selected color in various ways such as ligtening and darkening.