Linear Gradient Maker
Build a CSS linear-gradient() from an angle and two or three hex stops, then read the exact colour at 0, 25, 50, 75 and 100% along the line.
Design
20 tools
Tools in this category
Radial Gradient Maker
Build a CSS radial-gradient() from two or three hex colours, with circle or ellipse shape, size keyword and centre position, plus a solid fallback line.
Conic Gradient
Build CSS conic-gradient() code from a list of colours, with smooth or hard pie-slice stops, a start angle and a movable centre point.
CSS Gradient Generator
Build linear-gradient, radial-gradient and conic-gradient CSS from two or three hex colours, with an angle slider and a solid midpoint fallback colour.
Gradient Generator
Build CSS linear-gradient or radial-gradient code from two or three hex colours, with any angle, the colour at every 10% step and end-colour contrast.
Color Blindness Simulator
See how hex colours look with protanopia, deuteranopia, tritanopia or achromatopsia, using Machado 2009 matrices, and find the pair hardest to tell apart.
Deuteranopia Simulator
Paste hex codes and see how each looks with deuteranopia, using the Machado 2009 matrix in linear RGB. Pairs that merge into one tone are flagged.
Color Blender
Blend two hex colors at any ratio and get the mixed hex, RGB and HSL values, plus up to 20 evenly spaced in-between shades for a palette.
Color Converter
Convert a colour between HEX, RGB, HSL, HSV and CMYK from one entry, with relative luminance. Accepts #ff7f50, rgb(), hsl() or names like coral.
Compound Colors
Enter a hex colour and get a five-colour compound scheme: the complement, two split hues beside it and an analogous accent, each with hex and RGB.
Triadic Color Scheme
Turn one hex colour into a triadic palette: two partner hues rotated 120° and 240° on the HSL wheel, listed with hex, RGB and hue values.
Complementary Color Finder
Find the complementary colour of any hex code by rotating its HSL hue 180°, plus split-complementary and triadic partners with their hex values.
Analogous Color Scheme
Turn one hex colour into an analogous palette of 3 or 5 neighbouring hues, 10° to 60° apart, with hex and RGB values and the HSL working for each.
Color Palette Generator
Build complementary, analogous, triadic, split, square or monochromatic palettes from one hex colour, with hex, RGB and HSL values for every swatch.
Color Scheme Generator
Build complementary, analogous, triadic, split, square or monochromatic colour schemes from one hex code, with hex, RGB and HSL values for each.
Hex Color Picker
Type a hex color code and see its RGB, HSL, HSV and CMYK values, relative luminance and WCAG contrast against white and black. Accepts #RGB to #RRGGBBAA.
CMYK Color Picker
Set cyan, magenta, yellow and black percentages and read the matching hex, RGB and HSL values, plus total ink coverage for press limits.
HSV Color Picker
Set hue, saturation and value with sliders and read the hex, RGB, HSL and CMYK codes, or paste a hex code to get its HSV numbers back.
HSL Color Picker
Pick a colour with hue, saturation and lightness sliders and read its HEX, RGB, HSV and CMYK values, plus nine lighter and darker shades of the same hue.
RGB Color Picker
Set red, green and blue from 0 to 255 and read the hex code, HSL, HSV and CMYK values, plus WCAG contrast against white and black text.