From a photo to readable colours to copy-paste CSS

Picking colours for a small site tends to go in three steps. You find an image whose mood you like, you pull a few colours out of it, and then you discover that the nice mid-grey text on the nice pale background is unreadable. Omikuji Tools has a page for each step, and the colour work happens in your browser.

Color Palette: colours out of an image

Drop an image, paste it with Ctrl / Cmd + V, or pick a file, and the page extracts between 4 and 16 dominant colours. There are two algorithms, and the difference matters. Photo mood uses Median Cut and gives a balanced palette for the overall feel of a photo. UI / Logo uses K-Means and separates the large background areas from the small accents, which is what you want from a logo or a screenshot where the brand colour covers a few percent of the pixels.

Each swatch copies as HEX, RGB or HSL, and the whole palette comes out as a Tailwind config snippet, CSS variables or a JS array. A UI preview lets you assign palette colours to background, text and button, so you see them on something that looks like a page instead of in a row of squares. The image is never uploaded.

Colour Contrast Checker: will people be able to read it?

Enter a foreground and a background as #aabbcc, #abc, rgb() or hsl(), and you get the WCAG 2.x contrast ratio with pass/fail for normal text (AA 4.5:1, AAA 7:1), large text (AA 3:1, AAA 4.5:1) and the 3:1 that success criterion 1.4.11 asks for icons, borders and other UI parts. A preview shows body text, a heading and a button in your colours.

When a level fails, it suggests the nearest colour that passes by moving only the lightness — the hue and saturation stay yours — for either the text or the background. Click a suggestion to apply it. That usually solves the "brand colour is too light for text" problem without inventing a new brand colour.

One detail I made sure of: the ratio is displayed to two decimals, but the pass/fail verdict uses the unrounded value. A pair that shows as 4.50 can still be a hair under 4.5:1, and the checker will say so rather than round it into a pass.

CSS Generator: the code, with a big preview

Four tabs: gradients (linear, radial, conic, with an angle and colour stops), box shadows (up to five layers, each with offset, blur, spread, colour, opacity and inset), background patterns (stripes, dots, checker) and radius & border (each corner separately, plus width, style and colour). Adjust with pickers and numbers, watch the preview, copy the CSS.

The patterns are pure CSS — repeating-linear-gradient for stripes, radial-gradient with background-size for dots, conic-gradient for the checkerboard — so there is no image to download and nothing blurs when scaled. No vendor prefixes are emitted.

Both the contrast checker and the CSS generator keep their settings in the URL, so you can send a colleague the exact state. Everything is computed locally; the only thing that leaves the browser is the share URL, which is sent to a link shortener when you press the share button.

👉 Color Palette — extract colours from an image, export Tailwind or CSS. 👉 Colour Contrast Checker — WCAG ratios and the nearest passing colour. 👉 CSS Generator — gradients, shadows, patterns and borders.

Comments

Post a Comment

Popular posts from this blog

Amidakuji (Ghost Leg) maker: a fair random pairing tool for up to 200 people, entirely in the browser

Image
Amidakuji is the Japanese ladder lottery: names go along the top, prizes or roles along the bottom, and each person traces a path down a ladder with random rungs. Every name lands on exactly one result, and nobody can predict it. Offices in Japan use it for seating, task assignment and drawing lots. I built a browser version that works for up to 200 people. How it works Enter names (and optionally results). Paste a column from a spreadsheet and the rows fill in automatically; tab-separated "name → result" pairs work too. Press Draw and watch each path animate down the ladder, or reveal them one at a time. Nothing is sent to a server. The whole lottery (names, results, and the random seed for the rungs) lives in the URL after the # , so you can hand the link to others and they will open exactly the same ladder. Cheat prevention : turn it on and the results stay hidden until every path has been traced. Redrawing changes the seed, so a new link means a new draw. Share...
Read more

omikuji.dev: free browser-based tools, puzzle games and reference sites made in Japan

Image
This blog is where I post news about the sites I build and run under omikuji.dev . Everything is free, needs no sign-up, and wherever possible runs entirely in your browser so that nothing you type or drop into a page ever leaves your device. What is there Omikuji Tools — about 130 small web tools: timers and clocks, a ladder lottery, PDF and audio converters, text converters, network checks (SSL certificate, DNS, IP address), calculators and print templates. Most are available in 12 languages. omikuji games — 105 browser games (puzzles, logic, arcade, brain training, play against the CPU, and games for small children). Everyone gets the same daily puzzle and can post to that day's leaderboard. Japanese only for now. Reference sites — a kaomoji dictionary (59,000 Japanese text faces), an emoji dictionary, a dictionary for the Japanese word game shiritori , traditional colors of the world with sources, and a guide to etiquette mistakes travelers make abroad. These are in Ja...
Read more

Hakarasenai: a Firefox extension that only stops Google Analytics from measuring you

Image
The second piece of software I publish is Hakarasenai , a Firefox extension for desktop and Android. The name means "won't let it measure", and that is the entire feature list: it stops Google Analytics from measuring you. Free, MIT licensed, on addons.mozilla.org (v1.2.0). Why it exists Google ships an official "Google Analytics Opt-out Add-on", and there is a Firefox build of it. The trouble is how it works: it injects a <script> element into the page, and Firefox, like Safari, applies the page's own Content Security Policy to content scripts. On any site with a strict CSP the injection is blocked and the opt-out quietly does nothing. Nothing tells you it failed, which is the worst failure mode a privacy tool can have. I ran into this while trying to keep my own visits out of the GA4 properties of my sites, and wrote this instead. Two layers It tells the Google Analytics code on the page that you have opted out, using the same official hook...
Read more