Free Design Tools Online - Color, Contrast & CSS
Create and inspect common web design values locally.
Colour and design tools
Good colour choices are mostly about contrast and consistency. Text that is hard to read excludes people with low vision, anyone in bright sunlight and everyone on a cheap screen.
Contrast. The Web Content Accessibility Guidelines (WCAG) ask for a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text at level AA; level AAA asks for 7 to 1. The contrast checker calculates the ratio for any two colours so you can fix problems before launch.
Colour formats. HEX, RGB and HSL describe the same colours in different ways. HSL is the friendliest for adjusting: change lightness to make a shade, change hue to move around the wheel. The converter gives you all three.
Palettes. Start from one brand colour. Analogous colours sit next to it on the wheel and feel calm; a complementary colour sits opposite and gives strong accents. Use one dominant colour, one accent and neutrals for text and backgrounds.
CSS helpers. The gradient and box-shadow generators produce copy-ready CSS. Subtle shadows and gradients usually look more professional than strong ones.