Tools in This Collection
Color Palette Generator
Generate full color palettes from any base color with CSS and Tailwind export
Color Picker & Converter
Convert between HEX, RGB, HSL, HSV, and CMYK with CSS code and complement suggestions
CSS Gradient Generator
Create linear, radial, and conic CSS gradients visually with instant copy-paste code
CSS Box Shadow Generator
Build CSS box-shadow effects visually with blur, spread, offset, and color controls
Color Contrast Checker
Check color contrast ratios against WCAG 2.1 AA and AAA accessibility standards
Tailwind Color Palette Generator
Generate a full Tailwind CSS color palette (50-950) from any hex color
Favicon Generator
Generate favicons from text, emoji, or shapes with preview across all standard sizes
Font Size Converter
Convert font sizes between px, pt, em, rem, vw, and % with live text preview
Guides & Articles
Design and Visual Tools Workflow
Developers increasingly own more of the design implementation process. Color selection, accessibility compliance, and CSS visual effects that once required a dedicated designer's tools are now part of every frontend developer's workflow. These tools make that work faster and more accurate.
Color Selection and Palette Building
A coherent color palette starts with a single base color and extends to a range of tints and shades. The Color Palette Generator creates a full 9-step palette (50-900 or 50-950 for Tailwind) from any hex color and exports it as CSS custom properties or a Tailwind config object. The Tailwind Color Palette Generator specifically targets the Tailwind CSS naming convention, making it easy to add a custom brand color to any Tailwind project.
Accessibility: Contrast Requirements
WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text against background (AA standard), and 7:1 for AAA compliance. The Color Contrast Checker tests any foreground/background combination and shows the exact ratio, pass/fail status at both AA and AAA levels, and whether large text (18pt+ or 14pt+ bold) passes at the 3:1 threshold. Accessibility compliance is both a legal requirement in many jurisdictions and a practical improvement for users with visual impairments.
CSS Visual Effects
Box shadows and gradients are two of the most visually impactful CSS properties — and among the most tedious to write by hand. The CSS Box Shadow Generator provides sliders for horizontal offset, vertical offset, blur radius, spread radius, and color (with opacity). The CSS Gradient Generator creates linear, radial, and conic gradients with configurable color stops, angles, and positions, outputting browser-compatible CSS.
Frequently Asked Questions
What WCAG contrast ratio do I need to pass accessibility?
WCAG 2.1 Level AA (the standard required for most legal compliance): 4.5:1 for normal text (under 18pt or 14pt bold), 3:1 for large text (18pt+ or 14pt+ bold). WCAG AAA: 7:1 for normal text, 4.5:1 for large text. UI components and graphics require 3:1 contrast. The Color Contrast Checker tests any color pair against all levels and shows the exact ratio.
How do I create a Tailwind-compatible custom color palette?
The Tailwind Color Palette Generator takes a single hex color and generates all shades from 50 to 950 using the same luminance algorithm as the official Tailwind colors. The output is ready to paste into your tailwind.config.js under theme.extend.colors. All 10 shades are generated so Tailwind's arbitrary value mode and utility classes both work correctly.
What CSS gradient types are available in browsers?
Modern browsers support: linear-gradient (directional), radial-gradient (circular/elliptical from center), conic-gradient (sweeping angle), and repeating- variants of each. CSS gradients are widely supported across all current browsers. The CSS Gradient Generator covers all three main types with visual controls and outputs the vendor-prefix-free CSS.
What favicon sizes do I need for a modern website?
Modern favicon requirements: favicon.ico (16x16 and 32x32 combined for legacy IE), PNG icons at 16x16, 32x32 for browser tabs; 192x192 and 512x512 for Android PWA; 180x180 apple-touch-icon for iOS. The Favicon Generator outputs an SVG (scales to any size), plus ICO and PNG exports. For most modern sites, an SVG favicon plus the apple-touch-icon PNG covers 95%+ of use cases.
When should I use rem vs px for font sizes?
Use rem for font sizes that should respect the user's browser base font size setting (accessibility best practice). 1rem = 16px by default. Users who increase their browser font size for readability benefit from rem-based typography — px sizes ignore their preference. Use px only when you need pixel-perfect fixed sizes that must not scale with user preferences (typically rare).