001
popular
Colour Code Converter
Converts colours between HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK, LAB and named CSS colours.
33 tools · free · no account
Colour & Design Tools
Colour and CSS utilities for people who care about the details. Convert between colour models, build accessible palettes, check WCAG contrast, and generate gradients, shadows, borders and glassmorphism CSS you can paste straight in.
33 shown
002
popular
Colour Picker
Picks any colour and shows its HEX, RGB, HSL, HSV, CMYK and LAB values, plus tints, shades and…
003
popular
HEX to RGB Converter
Converts HEX colour codes to RGB and RGBA values, handling 3, 4, 6 and 8 digit hex.
004
RGB to HEX Converter
Converts RGB and RGBA values into HEX colour codes, including 8-digit hex with alpha.
005
HSL Colour Converter
Converts between HSL, HEX and RGB, so you can adjust lightness and saturation predictably.
006
CMYK Colour Converter
Converts between CMYK and RGB or HEX for print work, with a note on gamut differences.
007
popular
Colour Palette Generator
Builds harmonious palettes from a base colour using complementary, analogous, triadic…
008
popular
Colour Shades and Tints Generator
Generates a full 50-950 scale of tints and shades from one colour, ready to paste as CSS…
009
popular
Colour Contrast Checker
Calculates WCAG contrast ratio between two colours and reports AA and AAA pass or fail for…
010
Colour Blindness Simulator
Shows how a colour or palette appears to people with protanopia, deuteranopia, tritanopia and…
011
Random Colour Generator
Generates random colours with control over hue range, saturation and lightness, in any format.
012
popular
CSS Gradient Generator
Builds linear, radial and conic CSS gradients with multiple stops, live preview and copyable…
013
popular
Box Shadow Generator
Builds CSS box shadows with multiple layers, live preview and copyable output including inset…
014
Text Shadow Generator
Creates CSS text shadows including outline, emboss, neon and long-shadow effects.
015
Border Radius Generator
Builds CSS border-radius including per-corner and elliptical values, with a live preview.
016
Glassmorphism CSS Generator
Generates frosted-glass CSS with backdrop blur, transparency, border and shadow, with a live…
017
Neumorphism CSS Generator
Generates soft-UI shadows where an element appears extruded from or pressed into the background.
018
Cubic Bezier Generator
Builds CSS easing curves with a draggable preview and a library of standard easings.
019
CSS Filter Generator
Builds CSS filter chains — blur, brightness, contrast, grayscale, hue-rotate, invert…
020
CSS Transform Generator
Builds CSS transforms — translate, rotate, scale, skew and 3D perspective — with a live preview.
021
popular
Flexbox Generator
Builds flexbox layouts visually and outputs the CSS, with every alignment and wrapping option…
022
popular
CSS Grid Generator
Builds CSS Grid layouts with columns, rows, gaps and named areas, and outputs ready-to-use CSS.
023
CSS Triangle Generator
Creates triangles and arrows in pure CSS using the border trick, in any direction, size and…
024
CSS Button Generator
Designs a button with colours, padding, radius, border, shadow and hover state, and outputs…
025
popular
Font Pairing Tool
Suggests heading and body font combinations that work together, with live preview and the CSS…
026
Typographic Scale Generator
Generates a modular type scale from a base size and ratio, with CSS variables and clamp()…
027
Spacing Scale Generator
Generates a consistent spacing scale from a base unit, output as CSS variables, SCSS or…
028
Golden Ratio Calculator
Calculates golden ratio proportions for layouts, type sizes and image dimensions.
029
CSS Variables Generator
Converts a set of design values into CSS custom properties with light and dark theme blocks.
030
Tailwind Colour Converter
Finds the nearest Tailwind colour class for any hex value, and shows the hex for any Tailwind…
031
CSS Animation Generator
Builds CSS keyframe animations — fade, slide, bounce, pulse, shake, spin — with timing and a…
032
Aspect Ratio CSS Generator
Generates aspect-ratio CSS and the padding-top fallback for responsive media containers.
033
popular
Contrast Palette Grid
Builds a contrast matrix for a whole palette and marks each pair as safe for body text, large…
About these colour & design tools
Colour and CSS utilities for people who care about the details. Convert between colour models, build accessible palettes, check WCAG contrast, and generate gradients, shadows, borders and glassmorphism CSS you can paste straight in.
All 33 tools here are free and open immediately — there is no registration step, no credit card and no daily allowance to run out of. Most of them do their work in your browser, which means the page keeps working on a slow connection and your input is never sent to a server.