HTML & CSS Color Replace (HEX to OKLCH)
Paste CSS or HTML and every color inside it is rewritten to HEX, RGB, HSL or OKLCH at once. Changed lines sit beside the original so you can check every replacement.
:root {
--brand: oklch(0.603 0.218 257.4);
--danger: oklch(0.654 0.232 28.7);
--surface: rgb(247 247 247);
}
.btn {
color: oklch(1 0 0);
background: var(--brand);
border: 1px solid oklch(0.898 0 0);
}
<div class="bg-[oklch(0.283 0.039 249.3)] text-[oklch(1 0 0)] hover:bg-[oklch(0.214 0.042 252.8)]">
<span class="text-blue-500">Palette names are left alone</span>
</div>
7 replaced · 1 left alone — not HEX
Only the colours change
Drop in a whole CSS or HTML file and only the colour values inside it are rewritten. Not one other character is touched.
Pick a single format under before and only colours written that way are converted. Choose HEX → OKLCH and anything spelled rgb(...) is left alone — the tool tells you how many it skipped.
All does not care how a colour is written
Pick All, the first choice under before, and every colour is converted no matter which format it was written in. A file mixing HEX and RGB no longer needs two passes.
This also catches colours already written in the after format. With All → HEX (#ffffff), #FFF becomes #ffffff — the same colour, spelled differently, so it counts as replaced. A colour that comes out character for character identical is not counted and not highlighted: painting a place where nothing moved hides the places that did.
Tailwind arbitrary values are caught too
What sits inside the brackets of bg-[#1a2b3c] is just a colour value. So it is caught the same way CSS is — no per-language parser is needed.
.btn { color: #007aff; } → .btn { color: oklch(0.603 0.218 257.4); }
<div class="bg-[#1a2b3c]"> → <div class="bg-[oklch(0.283 0.039 249.5)]">
Palette names like bg-blue-500 are left alone. Those are names rather than values; resolving them would mean carrying the whole palette table, which is a different feature.
Side by side
Changed places are painted red on the before side and blue on the after side.
Lines are never wrapped — they run off to the right instead. Source code has long lines, and wrapping destroys the shape that tells you where you are.
Both panes scroll together, horizontally and vertically. One colour becomes one colour, so no line is ever added or removed and the same line always sits at the same height. The line numbers follow vertically only — letting them slide sideways would push them off screen.
Files
Drop a file onto the left pane or use Choose file. Up to 5 MB, because a single Tailwind-heavy HTML page reaches that size.
Saving reuses the name of the file you dropped. You are overwriting the file in place, so there is no reason to rename it.
Large files are drawn in part
Past 100,000 characters only the beginning is drawn, and the left pane becomes read-only while that is true. Otherwise the part you cannot see would quietly disappear as you edit.
Copy and save always use the whole file, and the replaced count is for the whole file too. Nothing is truncated — it just is not all on screen.
The limit exists because of drawing cost. Finding and converting every colour in a 2 MB file takes 0.2 seconds; painting that result to the screen takes 27. Since it is paid on every keystroke, the amount drawn is what gets capped.
Alpha survives
rgba(255, 0, 0, 0.3) converted to HEX becomes #ff00004d. Each format writes transparency differently, but it carries across.