# Design & Color Tools

Design and color tools handle the practical side of visual design: choosing and converting colors, building palettes and gradients, generating CSS for shadows and shapes, pairing fonts, preparing icons and favicons, checking accessibility, working out aspect ratios and print sizes, and drawing diagrams or mockups.

## Subcategories

- [Color Tools](https://techolm.com/design-tools/color-tools) (0 tools)
- [Palettes & Gradients](https://techolm.com/design-tools/palettes-gradients) (0 tools)
- [CSS Generators](https://techolm.com/design-tools/css-generators) (0 tools)
- [Fonts & Typography](https://techolm.com/design-tools/fonts-typography) (0 tools)
- [Icons, Favicons & Logos](https://techolm.com/design-tools/icons-favicons-logos) (0 tools)
- [Shapes, Patterns & Backgrounds](https://techolm.com/design-tools/shapes-patterns-backgrounds) (0 tools)
- [Accessibility](https://techolm.com/design-tools/accessibility) (0 tools)
- [Layout, Print & Ratios](https://techolm.com/design-tools/layout-print-ratios) (0 tools)
- [Diagrams & Flowcharts](https://techolm.com/design-tools/diagrams-flowcharts) (0 tools)
- [Mockups & Printables](https://techolm.com/design-tools/mockups-printables) (0 tools)

## Tools

- Color Picker (Coming soon): Pick a color visually and copy its HEX, RGB, HSL and OKLCH values.
- HEX to RGB Converter (Coming soon): Convert HEX color codes to RGB values, and RGB values back to HEX.
- Color Palette Generator (Coming soon): Create a color palette from a base color using harmony rules such as complementary and triadic.
- Favicon Generator (Coming soon): Turn an image or logo into favicon and app icon files in the sizes browsers and phones use.
- Color Contrast Checker (Coming soon): Check the contrast ratio between text and background colors against WCAG AA and AAA levels.

## Frequently asked questions

### What contrast ratio does WCAG require for text?

Under WCAG 2.2, level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, which is at least 18 points, or 14 points when bold. Level AAA raises these to 7:1 and 4.5:1.

### What is a HEX color code?

A HEX color code writes an RGB color as `#` followed by six hexadecimal digits: two each for red, green and blue, from 00 to FF. For example, `#FF0000` is pure red. A three-digit short form such as `#F00` repeats each digit, and an eight-digit form adds transparency.

### Why do colors look different on screen and in print?

Screens mix red, green and blue light (RGB), while printers mix cyan, magenta, yellow and black inks (CMYK), and each can show some colors the other cannot. Converting between them is therefore approximate, so check important print colors against a printed proof or your printer's color profile.