Skip to content
Techolm

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

Tools

  • Color Picker

    Pick a color visually and copy its HEX, RGB, HSL and OKLCH values.

    Coming soon

  • HEX to RGB Converter

    Convert HEX color codes to RGB values, and RGB values back to HEX.

    Coming soon

  • Color Palette Generator

    Create a color palette from a base color using harmony rules such as complementary and triadic.

    Coming soon

  • Favicon Generator

    Turn an image or logo into favicon and app icon files in the sizes browsers and phones use.

    Coming soon

  • Color Contrast Checker

    Check the contrast ratio between text and background colors against WCAG AA and AAA levels.

    Coming soon

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.