Skip to Main
Mike Gullo
mgullo.dev

Color Testing

This is a page dedicated to color testing as I put together my custom base stylesheet. Each color is displayed as the background color of an empty box and inside a box with the color and border color of the individual color.

Select a background color for the testing area to see how these colors look against various backgrounds. This is also a good way to check contrast ratios in the accessibility section of the dev tools.

Backgrounds

--mg-dark (#000000)
--mg-blue (#214fc6)
--mg-cream (#fffdd0)
--mg-gray (#808080)
--mg-gray-1 (#f5f5f5)
--mg-gray-2 (#d3d3d3)
--mg-gray-3 (#c0c0c0)
--mg-gray-4 (#a9a9a9)
--mg-gray-5 (#808080)
--mg-gray-6 (#585858)
--mg-gray-7 (#232323)
--mg-green (#228B22)
--mg-orange (#ff7518)
--mg-orange-soft (#fcd581)
--mg-purple (#6f42c1)
--mg-red (#dc143c)
--mg-red-dark (#b22222)
--mg-light (#ffffff)
--mg-yellow (#fff44f)
--mg-yellow-pale (#ffffd5)