Skip to content
FileKit
12 tools

Color And Design Tools

Convert color spaces, build palettes, check accessibility contrast and generate gradients. These color and design tools give you exact values you can paste straight into CSS, Figma or a design token file.

Box Shadow Generator

Build multi layer CSS box shadows with x, y, blur, spread, colour and inset controls, plus a live preview and CSS output.

Color Blindness Simulator

Simulate protanopia, deuteranopia, tritanopia and achromatopsia on a colour or an uploaded image using published colour vision matrices.

pngjpgjpeg

Color Contrast Checker

Check the WCAG contrast ratio between two colours with pass or fail results for AA and AAA at normal text, large text and UI components.

Color Palette Generator

Generate complementary, analogous, triadic, tetradic, monochromatic and split complementary palettes from a base colour, exportable as CSS, Tailwind or JSON.

CSS Gradient Generator

Build linear, radial and conic CSS gradients with multiple colour stops, angle control and live copy paste CSS output.

HEX to OKLCH Converter

Convert HEX colours to OKLCH with correct gamma decoding, an OKLab intermediate step and an exact reverse conversion back to HEX.

HEX to RGB Converter

Convert 3, 4, 6 and 8 digit HEX colours to RGB and RGBA, with matching HSL and ready to paste CSS.

HSL to HEX Converter

Convert HSL and HSLA colours to HEX and RGB with hue, saturation, lightness and alpha sliders.

Image Palette Extractor

Extract a dominant colour palette from an uploaded image using a real median cut quantisation algorithm on sampled pixels.

pngjpgjpeg

Random Color Generator

Generate random colours constrained by hue range, saturation and lightness, with a lock and regenerate palette mode.

RGB to HEX Converter

Convert RGB and RGBA channel values to a HEX colour with sliders, a live swatch and matching HSL output.

Tint and Shade Generator

Build a perceptually even 50 to 950 colour scale from one colour, exportable as CSS custom properties or a Tailwind config.

Why use browser based color and design tools

Color work is precision work. A brand hex needs an RGB equivalent for a canvas fill, an HSL equivalent for a programmatic tint scale and an OKLCH equivalent for perceptually even lightness steps. Getting those conversions slightly wrong produces palettes that look muddy in one place and blown out in another. These color and design tools do the math properly, including the gamma correction most quick converters skip.

Accessibility is treated as a first class output rather than an afterthought. Contrast results are reported against the WCAG thresholds for normal text, large text and user interface components, so you know exactly which combinations will pass an audit before the design ships.

Frequently asked questions

Yes. Every tool in this category is free with no account, no trial and no daily limit. The tools run as JavaScript inside your own browser, so there is no server cost to pass on and no reason to meter usage.

No. Files are read directly from your device into browser memory, processed locally and written back out as a download. Nothing is transmitted, nothing is logged and nothing is stored after you close the tab.

There is no limit imposed by us. The practical ceiling is your own device memory, because the file has to fit in the browser tab while it is being processed. Most machines handle files of several hundred megabytes without trouble.

Current versions of Chrome, Edge, Firefox and Safari on desktop and mobile are all supported. Where a specific tool depends on a capability that a browser has not shipped yet, that tool says so on its own page before you select a file.