Learn

Color Easily was made to be easy. Learn how you can quickly generate a color palette and view how it looks on a webpage in real time.

Quick. Simple. Color Easily!

Randomize!

Simply click the randomize button on the toolbar to generate a color palette.

Select your preferred Color Scheme and toggle on Light or Dark schemes if you already have something in mind.

Copy!

You can copy the hex code for any color you like by clicking on the color on the toolbar (desktop only) or palette drawer.

To expand the palette drawer, click the P on the right of the screen.

Pick!

Already have a color in mind? One of the randomized colors not quite right? Use the color picker to find the perfect color!

Enter a hex code, hsl value or pick a color straight from the canvas!

Lock!

Found a color you love? Lock it in! Simply click on the lock icon for any color you want to stick around.

Any future randomization will remember the colors you've locked in and provide other colors that complement them.

Export!

Export your new favorite color palette as a PNG, copy the palette as CSS variables, or export every color palette you've seen this session as a CSV file.

Share!

If you find a color palette you like, copy the link and share!

Links contain the hex codes for that unique palette so you can revisit it any time, or share it with the team.

How To Guides Coming Soon!

FAQ

What color schemes are being used?

The default randomization method of "All" will randomly choose one of the following color schemes to generate the color palette:

  • Monochromatic
  • Analogous
  • Complementary
  • Split Complementary
  • Triadic
  • Square
  • Tetradic

Each color scheme can be individually selected so that color randomization will use that specific color scheme.

Grayscale and True Random are two additional color schemes that can be individually selected, but are excluded from the default "All" selection.

How can I convert between color formats?

You can convert between Hex, RGB, HSL or HSV values on the color converter page.

Simply enter your chosen color's Hex, RGB, HSL or HSV value into the corresponding field and you'll get all 4 corresponding values. It's that easy!

What is APCA?

APCA or "Accessible Perceptual Contrast Algorithm" is the new and improved way to check perceptual contrast.

You can check your color's APCA values here.

If you want to learn more about APCA check out their "APCA in a Nutshell" documentation or visit their GitHub Repo Myndex / SAPC-APCA.

Can I change the site's font?

Yes! You can currently change the font to a selection of the most popular Google fonts.

Select a font from the dropdown on the toolbar to change the font for the current page.

P
Text
Bg
1
2
3
Text
Bg
1
2
3
Pick Colors!
Randomize! (spacebar)
Choose a
Color Scheme!
All
Light
Dark
Monochromatic
Analogous
Complementary
Split Complementary
Triadic
Square
Tetradic
Grayscale (excl. from All)
True Random (excl. from All)
Back!
Forward!
Export Colors!
  • CSS
  • PNG
  • CSV

Copy the root CSS variables for the current color palette:

:root {

  --text: ;

  --background: ;

  --accent1: ;

  --accent2: ;

  --accent3: ;

}

Export a .png file of the current color palette:

Text
Background
Accent 1
Accent 2
Accent 3

Export a .csv file that contains hex codes for every color palette you've seen this session:

Text Background Accent 1 Accent 2 Accent 3
... ... ... ... ...
... ... ... ... ...
Copied: