Color & CSS Tools
Color pickers, palette and gradient generators, HEX/RGB/HSL converters, contrast checker and CSS generators for shadows, borders and clip paths.
67 free tools
Color Picker
Pick any color and get its HEX, RGB and HSL values instantly. Free online color picker with shades, tints and one-click copy for designers and developers.
Color Palette Generator
Generate complementary, analogous, triadic, tetradic and monochromatic color palettes from any base color. Click any swatch to copy its HEX code fast.
Gradient Generator
Create beautiful linear, radial and conic gradients with up to 4 color stops, position sliders and an angle control. Live preview and copyable CSS code.
CSS Gradient Generator
Build production-ready CSS gradients with a fallback color, preset gallery and live preview. Copy clean background-image code straight into your site.
HEX to RGB Converter
Convert HEX color codes to RGB and RGBA instantly. Supports 3, 6 and 8-digit HEX with a live color swatch, batch list conversion and one-click copy.
RGB to HEX Converter
Convert RGB or RGBA values to HEX color codes instantly. Enter channels manually or paste an rgb() string, preview the swatch and copy the HEX result.
HEX to HSL Converter
Convert HEX color codes to HSL and HSLA instantly. See hue, saturation and lightness values with a live swatch, batch list conversion and copy button.
HSL to HEX Converter
Convert HSL values to HEX and RGB with live hue, saturation and lightness sliders. Watch the color swatch update in real time and copy the color codes.
Contrast Checker
Check the contrast ratio between text and background colors against WCAG AA and AAA standards. Live preview, pass/fail badges and a one-click color swap.
Random Color Generator
Generate a random color palette in one click. Lock the swatches you like, re-roll the rest, and copy the result as a HEX list or ready CSS variables.
CSS Border Radius Generator
Design rounded corners visually with per-corner sliders and a live preview box. Copy modern border-radius CSS, including fancy 8-value organic blob shapes.
CSS Box Shadow Generator
Make CSS box shadows online with offset, blur, spread, color and opacity controls. Stack multiple shadow layers, preview live and copy the box-shadow code.
CSS Clip Path Generator
Online clip-path generator and editor: triangles, arrows, hexagons, circles, ellipses and custom polygons with point sliders. Live preview and copy-ready CSS.
Color Mixer
Mix two colors together with an adjustable ratio slider and get the blended HEX and RGB instantly. Free online color blender with a live swatch preview.
Tints and Shades Generator
Generate a strip of tints and shades from any base color. Ten lighter and ten darker steps with HEX codes and one-click copy for hover states and scales.
Complementary Color Calculator
Find the complementary (opposite) color of any HEX code instantly. Rotates the hue by 180° and shows both swatches with copyable HEX and RGB values.
Analogous Color Generator
Generate an analogous color scheme from any base color. Colors at ±30° and ±60° on the wheel with copyable HEX codes and live swatches for calm palettes.
Triadic Color Generator
Generate a triadic color scheme from any base color. Three hues evenly spaced 120° apart on the wheel with copyable HEX codes and live swatch previews.
Monochromatic Color Generator
Generate monochromatic color variations from one base color by varying lightness and saturation. Copyable HEX swatches for clean, harmonious single-hue palettes.
Color Blindness Simulator
Simulate how colors look with protanopia, deuteranopia, tritanopia and achromatopsia. Compare original and color-blind versions of any HEX to test accessibility.
HEX to CMYK Converter
Convert HEX color codes to CMYK percentages for print. Enter any HEX and get cyan, magenta, yellow and key (black) values with a live swatch and copy button.
CMYK to HEX Converter
Convert CMYK print values to HEX and RGB for the web. Enter cyan, magenta, yellow and key percentages and get a copyable HEX code with a live swatch.
RGB to HSL Converter
Convert RGB values to HSL instantly. Enter red, green and blue channels and get hue, saturation and lightness with a live swatch and copyable hsl() output.
HSL to RGB Converter
Convert HSL values to RGB with live hue, saturation and lightness sliders. See the color swatch update in real time and copy the rgb() and HEX output.
RGB to CMYK Converter
Convert RGB values to CMYK percentages for print. Enter red, green and blue and get cyan, magenta, yellow and key values with a live swatch and copy button.
Color Name Finder
Find the nearest CSS named color for any HEX or RGB value. Shows the color name, its swatch and how close the match is, using all 140+ CSS color keywords.
RGBA Color Generator
Pick a color and adjust its alpha to generate rgba() and 8-digit HEX values. Live checkerboard preview shows true transparency, with one-click copy of both.
CSS Flexbox Generator
Build flexbox layouts visually with controls for direction, justify-content, align-items, wrap and gap. Live preview of the boxes and copy-ready CSS.
CSS Grid Generator
Design CSS grid layouts visually with column and row counts, gap control and a live grid preview. Copy clean grid-template CSS ready for your stylesheet.
CSS Text Shadow Generator
Free CSS text shadow generator to build text-shadow effects with x/y offset, blur and color. Add a second layer for glow, neon or 3D, then copy the CSS.
CSS Transform Generator
Generate CSS transforms with sliders for translate, rotate, scale and skew. See a live preview of the transformed box and copy the transform code.
CSS Transition Generator
Build CSS transitions with property, duration, timing-function and delay controls. Hover the live preview to see the effect and copy the transition code.
CSS Animation Generator
Generate CSS keyframe animations from presets like fade, slide, bounce, spin and pulse. Set duration, timing and iteration and copy the @keyframes code.
CSS Glassmorphism Generator
Create frosted-glass CSS cards with blur, transparency, color, border and radius controls. Live preview over a gradient and copy-ready backdrop-filter code.
CSS Button Generator
Design CSS buttons with background, text color, padding, radius, font size, border, shadow and a hover color. Live preview and copy-ready CSS including :hover.
CSS Filter Generator
Apply CSS filters with sliders for blur, brightness, contrast, grayscale, sepia, hue-rotate, saturate and invert. Live preview on a sample and copy the code.
CSS Triangle Generator
Generate pure-CSS triangles using the classic border trick. Choose direction, size and color, preview live, and copy the ready-to-use triangle CSS.
CSS Loader Generator
Generate pure-CSS loading spinners: ring, dots and bars. Control size, color and speed, preview the animation live, and copy the CSS including keyframes.
CSS Tooltip Generator
Build pure-CSS hover tooltips with position, background, text color, radius and custom text. Live hover preview and copy-ready tooltip CSS with an arrow.
CSS Outline Generator
Generate CSS outlines with width, style, color and outline-offset controls. Live preview of the outlined box and copy-ready outline code for focus states.
CSS Blend Mode Generator
Preview every CSS mix-blend-mode and background-blend-mode over two gradient layers. Pick a mode from the dropdown and copy the blend-mode CSS instantly.
CSS Border Generator
Free CSS border generator with per-side width, style and color controls plus a border-image maker for gradients or images. Live preview and copy-ready CSS.
OKLCH Color Converter
Convert HEX and RGB to OKLCH or OKLab and back, with a live swatch, gamut warnings and ready-to-paste oklch() CSS for Tailwind v4.
CSS Color Format Converter
Turn one colour into every modern CSS syntax at once: hex, rgb, hsl, hwb, lab, lch, oklab, oklch and display-p3, each with its own copy button.
RGB to LAB Color Converter
Convert sRGB or HEX to CIELAB and back through CIE XYZ at the D65 white point, with every intermediate step shown and out-of-gamut warnings.
RGB to HSV/HSB Converter
Convert HEX or RGB to HSV (the HSB model in Photoshop and Figma) and back, with the HSL equivalent shown beside it so you can see why they disagree.
Delta E Color Difference Calculator
Measure how different two colours look with CIE76, CIE94 and CIEDE2000, and read the result against the just-noticeable-difference scale used in print QC.
APCA Contrast Checker
Calculate the APCA lightness contrast (Lc) for any text and background pair, with the draft WCAG 3 font size and weight lookup and a live preview.
Accessible Color Finder
Find the nearest colour that passes WCAG contrast by adjusting only OKLCH lightness, so your brand hue survives while the text becomes readable.
Color Contrast Grid
Paste a palette and get every foreground-on-background contrast ratio in one matrix, colour-coded by WCAG pass level and exportable as CSV or Markdown.
Colorblind Safe Palette Generator
Generate a categorical palette that stays distinguishable under protanopia, deuteranopia and tritanopia, verified with CIEDE2000 on every simulated pair.
Tailwind Color Scale Generator
Turn one brand colour into a full 50-950 Tailwind scale in OKLCH, with contrast against white and black for every step and copy-ready @theme output.
Dark Mode Palette Generator
Map a light-theme palette to its dark counterpart by inverting OKLCH lightness within bounds you set, then re-check every pairing for 4.5:1 contrast.
Split Complementary Color Generator
Build a split-complementary scheme from any base colour, with an adjustable split angle, tint and shade ramps, and copy-ready HEX, RGB and HSL values.
Tetradic Color Scheme Generator
Generate four-colour rectangle or square harmonies from one base colour, balance them so one dominates, and preview the result on a mock UI card.
Cubic Bezier Generator
Drag two control points to build a cubic-bezier() easing curve, preview it on a moving dot, and copy the CSS timing function straight into your stylesheet.
CSS Neumorphism Generator
Build soft UI neumorphism CSS from one surface colour: two mirrored box-shadow layers with raised, pressed, concave and convex modes plus a contrast warning.
CSS Scrollbar Generator
Style scrollbars with both syntaxes at once: scrollbar-width and scrollbar-color for Firefox, plus the ::-webkit-scrollbar block for Chrome, Edge and Safari.
CSS Background Pattern Generator
Make stripes, checkerboards, polka dots, grid paper, hatching, zigzags and carbon fibre from pure CSS gradients — no image files and no extra HTTP requests.
Gradient Text Generator
Create gradient text in CSS with background-clip, an animated shimmer option, a solid-colour fallback and a live contrast check on light or dark backgrounds.
SVG Shape Divider Generator
Generate wave, tilt, curve, triangle, book, arrow and split section dividers as parametric SVG, ready as inline markup or a CSS data-URI background image.
Type Scale Generator
Build a modular type scale from a base size and ratio, with line heights snapped to a baseline grid, exported as CSS variables, Sass, Tailwind config or JSON.
CSS Clamp Calculator
Turn a minimum and maximum size plus two viewport widths into a fluid CSS clamp() value, with the slope, intercept and computed size at seven screen widths.
Hex to CSS Filter Converter
Find the CSS filter chain that turns a black element into any hex colour, with the residual delta E reported so you can see exactly how close the match got.
Colour Temperature to RGB Converter
Convert a colour temperature in kelvin to sRGB and hex using the Tanner Helland blackbody fit, with reference points from candlelight to clear polar sky.
Wavelength to Colour Converter
Convert a light wavelength in nanometres to approximate sRGB and hex using Bruton's ramp, alongside exact photon energy in eV and frequency in terahertz.
CSS Toggle Switch Generator
Generate an accessible CSS toggle switch built on a real checkbox, with focus-visible ring, disabled state, reduced-motion support and copyable HTML and CSS.