Genfy
Español

Design an interface

Color, contrast and accessible CSS, ready to paste.

Designing a UI starts with color and ends in details like shadows and a favicon. This workflow chains the visual tools with a focus on accessibility — it includes the WCAG contrast checker — so you don't pick pretty colors that later can't be read. Everything returns values ready to paste into your CSS.

  1. Build the palette 🎨 Color palette generator Generate harmonious color palettes in one click. Analogous, complementary, triadic and monochromatic schemes with HEX, RGB and HSL codes ready to copy.
  2. Check the contrast ⚖️ Color contrast checker Check whether your text and background combo meets WCAG 2.1 AA or AAA. Get the exact contrast ratio with live preview, free, no signup.
  3. Mix & tune colors ⚙️ Two-Color Blender Blend two colors at different ratios to get intermediate shades. Useful for gradients and palettes.
  4. Generate CSS gradients 🌈 CSS gradient generator Build linear, radial and conic CSS gradients with live preview. Copy ready-to-paste code, multi-stop support and modern background styles.
  5. Create CSS shadows 🌑 CSS box-shadow generator Design CSS shadows with live preview: offset, blur, spread, color and inset shadows. Copy the ready-to-paste box-shadow code. 100% free.
  6. Extract colors from an image 🎯 Image color picker Upload an image and get its dominant color palette, or click any pixel for its exact HEX. Nothing is uploaded to any server. Free.
  7. Generate the favicon ⚙️ Text-Based Favicon Generator Generate a favicon from text: pick a letter, background and font color. Download a square PNG ready to drop into any website.

Outcome: You build a palette, check its contrast, generate CSS gradients and shadows, extract colors from an image and create the favicon.