Build a Color Contrast Grid

Enter one color per line (this can be almost any format including Hex, RGB, HSL, HSLA, etc). If you choose to not fill in the "Y axis colors" field, we will compare the X axis against itself.

Directions

Enter colors to the leftabove. Don't have your own colors? Checkout some of our sample color grids:

Features

  1. Support for Hex, RGB, HSL, HSLA, etc
  2. Support color names (and having the name output within the table). Separate the name from the color with a colon (:).

  3. Easy copy/pasting of CSS with variable names (even with comments afterwards). The following code will parse perfectly:

    --teen-party--primary: #cc208e; /* accessibile on white, not on dark */
--teen-party--secondary: #6713d2; /* accessibile on white, not on dark */
--cotton-candy--primary: #00dbde; /* not accessibile on white. Accessible on dark */
--cotton-candy--secondary: #fc00ff; /* not accessibile on white. 3.19:1 on dark */
  4. Easy copying and pasting from Sass maps into the form. The following will work perfectly (the invalid lines will be discarded): 
    $palette: (
  blue-40: #185d87,
  blue-45: #0068a8,
  blue-50: #177ab6,
  blue-55: #2284c0,
  blue-60: #37a9ef,
  blue-70: #89d2ff,
  blue-90: #cdebf9,
);
  5. Sticky table headings and hover "crosshairs" make it easy to see which colors you're looking at when there is a very large table of colors.
  6. Super nifty "flip axis data" button (↑↓) that will flip the values in the X and Y coordinates.
  7. Saves the color grid to the URL, so you can share with your coworkers.
  8. You can use your browser's back/forward buttons to navigate back and forth when you make changes.
  9. Super lightweight. Written in vanilla HTML/CSS/JS, and without any tracking/analytics scripts.