Color & Design

HEX ⇄ RGB ⇄ HSL ⇄ HSV ⇄ CMYK — instant 5-way conversion, live swatch — browser-only

HTML named colors — all 147 CSS color names with hex/RGB/HSL, searchable + sortable.

Font pairing generator — 50+ curated Google Fonts pairs (heading + body) with live preview, classifications, CSS export.

WCAG color contrast fixer — input fg/bg, get current ratio, auto-suggest 4 fixed colors hitting AA/AAA while preserving hue.

Gradient mesh generator — 4-12 control points with bilinear blend, output as SVG, PNG, CSS multi-radial-gradients fallback for older browsers.

Turn one base color into a Tailwind-style 50–950 tint & shade scale — copy each step, export to Tailwind / CSS / SCSS / JSON — browser-only

Kelvin color temperature to approximate RGB and HEX, with a live swatch and lighting references, all in your browser

One base color → complementary, split, triadic, tetradic, analogous and monochromatic schemes on the HSL color wheel — copy every HEX, browser-only

OKLCH ⇄ HEX, RGB and HSL with a full sRGB → OKLab → OKLCH pipeline, live swatch and sRGB gamut warning — browser-only

RGB and HEX to CMYK for print, plus CMYK back to RGB, with a live swatch and one-click copy, all in the browser

Visual CSS gradient builder — linear, radial, conic with multi-stop colors, live preview, copy CSS, PNG export.

Visual CSS box-shadow builder — multi-layer, inset, color/blur with live preview.

Color mixer — blend any two colors with adjustable ratio, RGB/HSL/LAB color space, predict the result and copy hex.

Border radius generator — independent 8-corner control + blob shape randomizer, live preview, copy CSS or SVG path.

CSS transform generator — rotate/scale/skew/translate (2D + 3D) with live preview, copy CSS, 12 preset combos.

Emoji mashup — combine two emojis to make a new one (Unicode-only, no Google API, with 500+ pre-defined combos).

Paint a gradient INTO your text with background-clip: text — live preview, font size/weight, copy cross-browser CSS with -webkit- prefixes.

Color contrast checker — WCAG 2.2 AA/AAA compliance for normal/large text, real-time grade.

Color blindness simulator — paste hex or upload image, see how it looks to people with protanopia / deuteranopia / tritanopia / monochromacy.

Two HEX colors in, perceptual ΔE out — CIE76, CIE94 and CIEDE2000 with a plain reading of the result — browser-only

CSS Grid generator — visually design grid layouts (rows/cols/gap/areas), copy CSS code, fully responsive.

CSS grid visual generator — drag to set columns/rows, place grid-area named regions, copy ready CSS + HTML, with 12 layout templates.

CSS clamp() fluid typography generator — min/max font size, viewport range, full type scale (h1-h6 + body), copy CSS / Tailwind.

CSS font stack generator — system-safe font families with full Win/Mac/Linux/Android/iOS fallback chains, with CJK fallbacks, copy as CSS/Tailwind/SwiftUI.

CSS shadow generator pro — multi-layer box-shadow + text-shadow + filter:drop-shadow, with Material/Tailwind/Apple shadow presets and dark-mode preview.

CSS loaders — 40+ pure-CSS spinners/skeletons, customize color/size/speed, copy ready-to-use code.

Visual CSS clip-path builder — polygon, circle, ellipse, inset with drag handles.

Tailwind CSS cheat sheet — 100+ utility classes (spacing, color, flex, grid, typography, responsive) with live preview.

Social media aspect ratio guide — Instagram / TikTok / YouTube / X / LinkedIn / Xiaohongshu / Bilibili exact pixel dimensions and ratios.

Piano chord finder — type any chord (Cmaj7, F#m, Bdim) and see the keys highlighted on a piano, with notes and inversions.

Design buttons that look pressable — 3D raised, neumorphic, glass — with a live preview you can hover & press, plus full :hover/:active CSS export

Dial in blur, brightness, contrast, grayscale, sepia, hue-rotate, saturate, invert, opacity + drop-shadow with live preview — copy the filter string

Visually build @keyframes — edit keyframes, set transform/opacity/color, live-preview, and copy production-ready CSS — browser-only

Pure-CSS geometric backgrounds — dots, grid, stripes, checkerboard, diagonal, cross — live preview, one-click copy, zero images

Design custom scrollbars visually — exports WebKit + Firefox-standard CSS, live preview, one-click copy — browser-only

Pure-CSS triangles via the border trick — 8 directions, live preview, copy both border + clip-path CSS — browser-only

Flexbox playground — toggle every container and item property on a real flex box and copy the exact CSS. direction, justify, align, gap, order, grow/shrink/basis, align-self. 100% client-side.

Generate smooth organic blob shapes — adjustable complexity, randomness, seed — export SVG / CSS clip-path — 100% browser-only

Generate smooth SVG wave dividers for landing pages — adjustable waves, amplitude, layers, seed — flip top/bottom — export SVG / CSS — browser-only

Pick a base size + ratio (Major Third, Perfect Fourth, Golden…) and get a full modular type scale with px + rem, live preview, and CSS / Tailwind / SCSS export — browser-only

Paste CSS variables or JSON tokens, select fg/bg pairs, and flag every WCAG AA/AAA failure across your design system at once.

Interactive color wheel with harmony explorer and color mixing — complementary, analogous, triadic, split-complementary, and tetradic schemes for teachers and students.

Paste Tailwind colors, CSS theme tokens, or JSON palettes and audit every foreground/background pair for WCAG AA and AAA contrast.

Convert any color between HEX, RGB, HSL, OKLCH, CSS variable, and Tailwind — with live preview.

CSS @media query + responsive breakpoint generator — Tailwind / Bootstrap / Material presets, mobile-first vs desktop-first, dark mode, hover, reduced-motion, aspect-ratio.

Score any CSS selector as an (a, b, c) triple, compare which rule wins the cascade, and see exactly which digit decided it — browser-only

Visual CSS text-shadow builder — multi-layer, color, blur with live preview and shareable links.

Find duplicates and keep one clean copy of css variables from pasted text or uploaded local files.

Extract, dedupe, and export css variables from pasted text or uploaded local files.

Convert css variables from pasted text or uploaded local files.

Validate and explain issues in css variables from pasted text or uploaded local files.

Normalize, sort, and prepare css variables from pasted text or uploaded local files.

Split any length by φ = 1.618 — long/short segments, golden sequence, font scale, layout columns, golden rectangle — browser-only

Find duplicates and keep one clean copy of hex colors from pasted text or uploaded local files.

Extract, dedupe, and export hex colors from pasted text or uploaded local files.

Convert hex colors from pasted text or uploaded local files.

Validate and explain issues in hex colors from pasted text or uploaded local files.

Normalize, sort, and prepare hex colors from pasted text or uploaded local files.

Parse, edit, and generate Google Fonts CSS2 links, HTML preconnect tags, @import CSS, variables, and Tailwind font stacks.

Image cropper — drag to crop, fixed ratios (1:1 / 16:9 / 9:16 / 4:3), zoom, rotate, fully client-side.

Image format converter — JPG ↔ PNG ↔ WebP ↔ AVIF, batch + transparent background handling, 100% client-side.

Image resizer — resize JPG/PNG/WebP by pixels/%/preset, fully client-side, no upload.

Image watermark — text or image watermark with position grid, opacity, tile mode, batch processing.

Build traffic-light RAG palettes — pick hex codes, export CSS variables, JS tokens, or Tailwind config for any process dashboard