Design & Color
34 free tools — no signup required.
The Design & Color category collects tools for building palettes, checking accessibility, and generating CSS for common visual effects. Use the Contrast Checker to confirm text meets WCAG ratios, the Color Palette Generator to build a coordinated scheme, or the CSS Gradient Generator to produce ready-to-paste background code. The set also covers box shadows, border radius, hover effects, font pairing, color-model conversion between RGB, HSL, and CMYK, and a color-blindness simulator. Each tool previews the result live and outputs copyable code or values, so designers, front-end developers, and anyone styling a page can move from idea to working CSS without hand-tuning numbers in a stylesheet.
Featured Design & Color
Contrast Checker
Check WCAG contrast ratio between two colors and see if they pass AA and AAA for normal and large text.
Color Palette Generator
Generate a 5-color palette from a base color using classic color-harmony rules.
CSS Gradient Generator
Build linear or radial CSS gradients with a live preview and copyable CSS.
CSS Box Shadow Generator
Build multi-layer box-shadows with inset support, live preview, and a copyable CSS declaration.
Font Pairing Tool
Browse curated heading + body font pairings from the free Google Fonts library, grouped by use case.
Color Harmony Generator
Generate complementary, analogous, triadic, tetradic, split-complementary, and square palettes from a base color.
CSS Border Radius Generator
Tune four corners independently with a live box preview and a copyable border-radius declaration.
Color Blind Simulator
Preview any color as people with protanopia, deuteranopia, or tritanopia would perceive it, using Machado matrices.
CSS Gradient Generator
Build linear or radial CSS gradients with a live preview and copyable CSS.
Color Palette Generator
Generate a 5-color palette from a base color using classic color-harmony rules.
Random Color Generator
Generate random colors with hex, RGB, and HSL values shown side-by-side.
CSS Grid Generator
Interactive CSS Grid playground with live preview and copyable CSS for columns, rows, gap, and areas.
CSS Flexbox Playground
Interactive flexbox playground — set direction, justify, align, wrap, and gap with a live preview.
CSS Border Radius Generator
Tune four corners independently with a live box preview and a copyable border-radius declaration.
CSS Box Shadow Generator
Build multi-layer box-shadows with inset support, live preview, and a copyable CSS declaration.
CSS Flexbox Generator
Compose flex container and item rules with a live preview and a copyable CSS block.
CSS Animation Generator
Pick a preset keyframe animation, tune duration, easing, and iteration, then copy ready-to-paste CSS.
Text Shadow Generator
Layer text-shadows with custom offset, blur, and color on live preview text — copyable CSS.
Image Shadow Generator
Add box-shadow or filter: drop-shadow to images with live preview and a copyable CSS snippet.
CSS Hover Effects Generator
Pick from ten preset hover transitions and copy the base + :hover CSS — preview by hovering the button.
CSS Border Style Generator
Control width, style, and color per side (or all four together) with a live box preview.
CSS Button Generator
Style a button with background, padding, radius, border, shadow and hover state — copy the CSS.
CSS Badge Generator
Build pill, rounded, or square badges with color, padding, and typography — copy the CSS.
Icon Generator
Render bundled stroke or filled SVG icons at any size and color — copy markup or download SVG/PNG.
Icon Converter
Convert any image to multi-size PNG, ICO-compatible PNG, or WebP icons — all client-side.
CSS Image Filter Generator
Build a CSS filter chain (brightness, contrast, hue, blur and more) with a live preview.
SVG Path Generator
Click a canvas to add points and produce a valid SVG path with straight, quadratic, or cubic segments.
Contrast Checker
Check WCAG contrast ratio between two colors and see if they pass AA and AAA for normal and large text.
Color Blind Simulator
Preview any color as people with protanopia, deuteranopia, or tritanopia would perceive it, using Machado matrices.
Pantone Color Converter
Convert a Pantone Solid Coated code to RGB and hex, or find the nearest Pantone to any hex color.
CMYK to RGB Converter
Convert CMYK percentages to sRGB values and hex using the standard print-to-screen formula.
RGB to HSL Converter
Convert an RGB color (0-255) to HSL hue, saturation, and lightness with the hex equivalent.
Color Harmony Generator
Generate complementary, analogous, triadic, tetradic, split-complementary, and square palettes from a base color.
Color Theory Generator
Apply classic color-theory schemes to a base color with a swatch palette and an explainer of when to use each rule.
Color Compatibility Checker
Compare two colors for hue harmony and WCAG contrast to see whether they work together visually and accessibly.
Color Name Finder
Find the closest CSS named color (X11/W3C extended list) for any hex value, with three near-match alternates.
Font Generator
Convert plain text to Unicode styled variants - bold, italic, script, fraktur, monospace, fullwidth and more.
Font Pairing Tool
Browse curated heading + body font pairings from the free Google Fonts library, grouped by use case.
Design System Generator
Generate primary color, spacing, and type-scale tokens from a base color, base font size, and modular ratio.
Spacing Scale Generator
Build a linear (4px/8px) or modular (1.25/1.333/1.5/1.618) spacing scale with px and rem CSS variables.
Responsive Design Breakpoint Tester
Preview your HTML/CSS (or a URL, if the site allows iframing) at eight common viewport widths from 320 to 1920 pixels.
Card Design Generator
Design a UI card with live preview and copy the CSS class plus HTML markup.
About Design & Color
Design and color tools translate visual choices into precise values and CSS. Color tools convert between models, RGB for screens, HSL for intuitive adjustment, and CMYK for print, and generate harmonies based on color-wheel relationships like complementary or triadic. Accessibility tools compute the contrast ratio between two colors using relative luminance, then compare it against the WCAG thresholds. Effect generators assemble valid CSS for gradients, shadows, and transitions from sliders and inputs, giving a live preview alongside the code.
Take the Contrast Checker. White text on a mid-gray background of #767676 produces a contrast ratio of about 4.54:1. That passes the WCAG AA threshold of 4.5:1 for normal body text but falls short of the stricter AAA level of 7:1. Seeing the exact ratio lets you nudge the gray darker until the combination clears the bar you are targeting.
Results are computed from the color values and settings you choose, so they are exact. Color appearance still varies across monitors and print processes, so treat on-screen previews as a close guide and verify critical colors in the medium where they will actually appear. When a palette or token set will be reused across a product, record the exact values you settle on so spacing, contrast, and color stay consistent between screens and components.
Frequently asked questions
- What are design and color tools used for?
- They build color palettes and harmonies, check contrast for accessibility, convert between color models, and generate CSS for gradients, shadows, borders, and hover effects, with a live preview and copyable output.
- When should I use these tools versus a full design app?
- Use them for quick palette decisions, accessibility checks, and ready-to-paste CSS. For complex layouts, vector artwork, or brand systems, a dedicated design application complements these focused, single-purpose tools.
- How accurate are contrast ratios and color conversions?
- They are computed exactly from the values you enter using the WCAG luminance formula and standard color-model math. On-screen color appearance still varies by monitor and print process, so verify critical colors in the final medium.
- Are my colors and settings stored?
- No. Nothing is stored. Everything runs client-side in your browser, so the colors, values, and CSS settings you choose stay on your device and never reach a server.
- Do these tools cost anything?
- No. Every design and color tool is free with no signup, account, or payment. Open a tool, adjust the settings, and copy the generated values or CSS.