Color & Design Tools
Pickers, palettes, contrast and design math. · 17 tools
Color ConverterConvert colours between HEX, RGB, HSL, HSV, HWB, CIELAB, LCH, OKLab, OKLCH, Display P3 and CMYK, one at a time or as a list.Color PickerPick any colour with a visual picker, from your screen or from an image, and copy it as HEX, RGB, HSL, OKLCH and more.Contrast CheckerCheck the WCAG 2.x contrast ratio of text and background colours, see AA and AAA results, APCA Lc, and get the nearest passing colour.Aspect Ratio CalculatorSolve for a missing width, height or ratio, reduce any pair to its simplest ratio, and scale a box to fit a target size.Color Blindness SimulatorSee how a colour or a whole image looks under protanopia, deuteranopia, tritanopia and achromatopsia.Color MixerMix two colours at any ratio in RGB, HSL or OKLab, compare how each space blends them, and copy the result or a CSS gradient.Color Name FinderFind the nearest CSS colour name for any HEX, RGB or HSL value, measured with CIEDE2000, and browse all named colours.Color Palette GeneratorBuild a harmonious colour palette from one base colour using complementary, analogous, triadic, monochrome or shade/tint schemes, then export it.Color Shades GeneratorTurn one base colour into an 11-step 50-950 tint/shade ramp, tuned in OKLCH, with contrast ratios per step and CSS, Tailwind or JSON export.Golden Ratio CalculatorSolve a golden division for the smaller part, larger part or whole, build a golden rectangle from one side, and see Fibonacci ratios approach φ.Image Color ExtractorDrop an image to pull its dominant colour palette, with each swatch’s share of the picture, plus click-to-pick on any pixel.Placeholder Image GeneratorGenerate placeholder.com-style boxes with any width, height, background and text colour; export PNG, a data URL or SVG markup.PPI CalculatorCalculate pixels per inch from diagonal size and resolution, or work backwards to find diagonal size or resolution, plus a typical-range reference table.SVG Blob GeneratorGenerate a smooth, organic blob shape as an SVG path from a seed, with controls for point count, roughness, size and fill colour.SVG Pattern GeneratorDesign a repeating SVG background pattern — dots, stripes, grid, checkerboard or cross-hatch — with a live tiled preview and CSS output.Tailwind Shade GeneratorGenerate a full Tailwind-style 50-950 colour scale where a step you pick matches your input colour exactly, exported as tailwind.config.js and CSS variables.Type Scale GeneratorBuild a modular type scale from a base size and ratio, with live preview text per step and copyable CSS variables or a Tailwind config.
Pick colours, convert between HEX, RGB, HSL and OKLCH, generate palettes and shade scales, and check WCAG contrast so text stays readable for everyone. Design helpers such as aspect-ratio and type-scale calculators keep layouts consistent.
Every colour value can be copied in the format your design tool or stylesheet needs.
Categories
Text & WritingDeveloper ToolsJSON, XML, YAML & CSVEncoders & DecodersImage ToolsPDF ToolsVideo & Audio ToolsFinance CalculatorsHealth & Fitness CalculatorsMath CalculatorsDate & Time ToolsUnit & Currency ConvertersSEO & Marketing ToolsSocial Media ToolsCSS, HTML & JS ToolsSecurity & Password ToolsHash & Crypto ToolsQR Code & BarcodeRandom GeneratorsProductivity ToolsEducation & Student ToolsData Analysis ToolsRegex & ValidationNetwork & Web ToolsFun & GamesFile Tools