Color & Design

Color tools for design and CSS: convert between HEX, RGB, HSL, OKLCH, and named CSS color spaces.

All Color & Design

• Color Converter Convert between HEX, RGB, HSL, HSV, OKLCH, and named CSS colors.
• Color Palette from Image Extract a 6-color palette from any image. k-means clustering in the browser.
• CSS Gradient Generator Build linear, radial, conic CSS gradients visually. Copy as CSS.
• CSS Box Shadow Generator Build CSS box-shadow visually. Multiple layers, inset, spread, blur.
• CSS clamp() Generator Generate fluid CSS clamp(min, preferred, max) for typography and spacing.
• Glassmorphism CSS Generator Frosted-glass CSS with backdrop-filter, border, shadow.
• CSS Easing Function Picker Pick a cubic-bezier easing curve visually. Includes common presets.
• CSS Button Generator Build CSS buttons visually: padding, radius, color, shadow, hover. Copy CSS.
• CSS Border Radius Generator Build any border-radius shape — equal corners, per-corner, elliptical.
• CSS Triangle Generator Generate pure-CSS triangles (tooltip arrows, dropdown indicators) with the border trick.
• CSS Animation Generator Build CSS @keyframes animations visually. Fade, slide, bounce, pulse, spin.
• CSS Flexbox Playground Live flexbox playground. justify-content, align-items, gap, wrap — see results instantly.
• CSS Grid Generator Build a CSS grid layout visually. Tracks, gaps, named areas.
• WCAG Color Contrast Checker Check WCAG AA/AAA contrast between any two colors. Suggestions to pass.
• CSS Aspect Ratio Calculator Compute aspect-ratio CSS for any dimensions. 16:9, 4:3, golden ratio presets.
• CSS Scrollbar Designer Style scrollbars cross-browser. Webkit + Firefox + standard. Live preview.
• CSS Variable Extractor Extract all CSS custom properties (variables) from any stylesheet.
• Tailwind Color Picker Browse the Tailwind CSS color palette. Click any shade to copy HEX or class name.
• CSS Text Shadow Generator Visually build CSS text-shadow declarations. Multi-shadow stack, presets, copy-to-clipboard.
• SVG Blob Generator Generate organic SVG blob shapes for hero backgrounds. Adjustable complexity + randomness seed.
• CSS Spinner / Loader Generator Generate pure-CSS loading spinners (ring, dots, bars). Copy-paste HTML + CSS.
• CSS Filter Playground (Blur, Brightness, Hue) Live visual playground for the CSS filter property. Stack effects, copy declaration.
• CSS Skeleton Loader Generator Generate animated skeleton placeholder loaders (cards, lines, avatars). Pure CSS.
• CSS Color Name Finder (Nearest Named Color) Enter any hex / RGB / HSL color; get the nearest CSS named color. 147 named colors + most popular Crayola / Pantone names.
• HSL ↔ RGB ↔ HEX ↔ OKLCH Color Converter Convert between HSL, RGB, HEX, OKLCH, OKLAB, HWB color formats. Live preview, copy-to-clipboard.
• CSS Scrollbar Styler (Webkit + Firefox) Visually design a custom CSS scrollbar. Generates ::-webkit-scrollbar rules + scrollbar-color (Firefox) declarations.
• CSS Gradient Generator (Linear, Radial, Conic) Visual CSS gradient builder. Linear, radial, conic. Multiple stops, copy CSS, save presets.
• CSS clip-path Generator (Polygon, Circle, Inset) Visually build a CSS clip-path value. Polygon (drag vertices), circle, ellipse, inset. Live preview.
• Color Blender (Mix Two Colors) Blend two colors at any ratio. Linear RGB and perceptually-uniform OKLCH interpolation modes.
• Extract Color Palette from Image Drop an image; extract its dominant N colors via k-means clustering. Get hex / RGB values to use in CSS.
• CSS Conic Gradient Generator (Pie Charts, Color Wheels) Build CSS conic-gradient values visually. Multiple stops, custom start angle. Perfect for pie charts and color wheels.
• Color Shades Generator (Darker Variations) Generate 10 shades darker than a base color. Useful for hover states, dark mode variants.
• Color Tints Generator (Lighter Variations) Generate 10 lighter tints of a base color. Useful for backgrounds, disabled states.
• Monochromatic Color Palette Generator Generate a monochromatic palette (shades + tints of one hue). 9-step Tailwind-style scale.
• Triadic / Complementary / Analogous Palette Generate triadic, complementary, split-complementary, analogous, tetradic palettes from any base color.
• Color Contrast Grid (All Pairs vs WCAG) Test contrast ratios between every pair of colors in your palette. WCAG AA / AAA flags.
• Hex to RGBA Converter (With Alpha) Convert hex color (with or without alpha) to rgba() with adjustable transparency.
• CSS text-decoration Generator (Underline, Wavy) Build text-decoration values visually: line, style (solid, wavy, dotted), color, thickness, underline-offset.
• CSS overflow Behavior Tester Visualize CSS overflow: visible / hidden / scroll / auto / clip. With and without overflow-x / overflow-y.
• CSS Grid to Flexbox Converter (Common Layouts) Convert common CSS grid layouts (3-column, holy grail) to flexbox equivalents. Side-by-side comparison.
• CSS Modular Typography Scale Generator Generate a modular type scale (1.125, 1.25, 1.333, etc.) for h1-h6. Output as CSS custom properties.
• Complementary Color Palette Generator Find the complementary color for any hex and build a balanced palette around the opposite hue.
• CMYK to RGB Converter Convert colors between CMYK and RGB/hex. See print-style CMYK percentages alongside screen RGB values.
• HSV / HSB to RGB Converter Convert between HSV (HSB) and RGB/hex. The hue-saturation-value model used by most color pickers.
• CSS Specificity Calculator Calculate the specificity of any CSS selector as an (a,b,c) triple, compare selectors to see which wins, and understand :is(), :not(), :where() and pseudo-elements.
• CSS Media Query Generator Build CSS @media queries visually — min/max width with Tailwind and Bootstrap presets, orientation, prefers-color-scheme, reduced-motion, hover and pointer.
• OKLCH Color Picker Pick colors in OKLCH with lightness, chroma and hue sliders and get oklch(), hex, rgb and hsl instantly, with an sRGB gamut warning. Runs in your browser.
• CSS Unit Converter Convert between px, rem, em, %, pt, vw, vh and more — set root and parent font size and viewport, and copy any value. Runs in your browser.
• APCA Contrast Checker Check text contrast with APCA — the algorithm behind WCAG 3 — which models real readability better than the old 4.5:1 ratio. Get the Lc value and the minimum font size it allows.
• CSS color-mix() Generator Build a CSS color-mix() function visually — pick two colors, a color space (srgb, oklch, hsl) and the percentage — with a live swatch and copy-ready output.
• CSS @property Generator Generate an @property at-rule to register a typed custom property — syntax, inherits and initial-value — so a CSS variable can animate and stay valid.
• CSS Cascade Layers Visualizer Lay out @layer order and see which rule wins — cascade layers change specificity resolution, and this shows the winning declaration across layers.
• CSS Nesting ↔ Flat Converter Convert between nested CSS (the native & syntax) and flat, expanded rules — both directions — to adopt or unwind CSS nesting.
• CSS View Transitions Generator Generate the CSS for the View Transitions API — view-transition-name and the ::view-transition pseudo-element animations — for smooth page and state transitions.
• CSS Scroll Snap Generator Build a CSS scroll-snap container visually — snap type, alignment and padding — for carousels and full-page sections, with a live demo and copy-ready CSS.
• CSS Scroll-Driven Animation Generator Generate scroll-driven animations with scroll-timeline / view-timeline and animation-timeline — reveal-on-scroll and progress effects in pure CSS, no JS.
• CSS Anchor Positioning Playground Experiment with CSS anchor positioning — anchor() and position-area — to tether tooltips and popovers to an element without JavaScript, and copy the CSS.
• styled-components / Emotion to CSS Convert styled-components and Emotion template literals into plain CSS — extract the rules, resolve simple interpolations into custom properties — to migrate off CSS-in-JS.
• Line-Height Calculator Find the right line-height for a font size and measure — unitless ratio and the resulting pixel leading — for comfortable, readable body text.
• CSS to Tailwind Converter Map plain CSS declarations to the nearest Tailwind utility classes — colors, spacing, typography and layout matched against the default theme scale.
• SCSS to CSS Converter Compile SCSS to plain CSS in the browser — variables, nesting, & parent selectors and simple mixins expanded into standards CSS you can ship.
• Less to CSS Converter Convert Less to plain CSS — @variables, nesting and parent selectors resolved into standard CSS rules, all processed locally in your browser.