ecech.

Tools tagged #colour

Every ecech. tool tagged colour: 11 free calculators and utilities across Design & Color, Developer & Code. No signup, runs in your browser.

🎨

Colour Blind Check

Red-for-bad and green-for-good is the most common convention in software and the exact pair that collapses. Paste your palette and see which colours merge.

Design
🎨

Colour Palette Generator

Press space for a new palette, lock the ones you like, keep going. Spaced by lightness rather than randomly, so the result is actually usable in an interface.

Design
🎨

Colour Palette Harmony

HSL says the complement of blue is a much brighter yellow. Your eye disagrees. This rotates in OKLCH and shows both, so you can see the difference.

Design
💻

CSS Gradient Generator

Linear, radial and conic gradients with as many stops as you like — plus the fix for the muddy grey band that appears between complementary colours.

Developer
🎨

Greyscale Weights

All three average to exactly 85. Weighted by luminance they are 54, 182 and 18 — which is roughly how the eye sees them.

Design
🎨

Hex Opacity Calculator

Convert between hex alpha and percentage, and see the flat colour a semi-transparent layer actually produces over your background.

Design
🎨

Hex Shorthand

Shorthand doubles each digit, so #f61 is #ff6611 — not #ff6601. Shortening by truncation changes the colour.

Design
🎨

HSL / HSV Converter

HSV at 100% saturation and 100% value is a vivid colour. HSL at 100% and 100% is white. Design tools show HSV, CSS wants HSL, and nothing warns you.

Design
🖼️

Image Colour Extractor

Averaging the pixels of a red flower on green leaves gives brown. This groups pixels into real clusters, in linear light, so every colour you get is one you can see.

Image
🎨

Named Colour Finder

148 names with a century of accumulated history. Finding the closest one needs a perceptual distance, because RGB distance picks a different answer.

Design
🎨

RGB to CMYK

A vivid screen green has no CMYK equivalent. Converters return the nearest printable colour and say nothing. This shows you the gap before it surprises you.

Design

Related tags