Colors and code,
for better design.
Kolorvia is a fast, precise toolkit for the people who work with color every day — conversions, palettes, gradients, and accessibility checks, with clean code output for every result.
Everything color, in one place.
Every tool runs entirely in your browser — no accounts, no paid APIs, no server round-trip. Don't take our word for it: the converter below is live right now.
Color encyclopedia
141+ named colors, each with conversions across nine formats, harmonies, shades, and WCAG contrast data — plus a full page for any hex you can type.
Explore colors →Converters
Try it right here — type any hex:
- RGB
- HSL
OKLCH LAB LCH HWB CMYK HSV
Palettes
Seven harmony rules from any base color, with export to CSS, SCSS, or Tailwind.
Gradients
Linear, radial, and conic CSS gradients from up to five stops, code included.
Accessibility
WCAG contrast checking, Delta E difference, and an 8-type color blindness simulator.
Color Match
Guess today's hex code by eye — six tries, hotter/colder hints per channel, and a shareable result. Same color for everyone, everywhere.
Play today's puzzle →Guides
How WCAG contrast is really calculated, why browsers moved to OKLCH, what ΔE means, and the math behind every harmony rule — written to be actually understood.
Read the guides →Image color picker
Pull palettes from a photo — upload an image, click any pixel for its exact color, and get an automatic dominant palette. Nothing ever leaves your browser.
Extract colors →Color of the day
#c152c7
A muted medium magenta — closest named color: Medium Orchid (ΔE 6.73) . A new color appears every midnight.
141+
Named colors
16
Free tools live
100%
Browser-based
AA/AAA
WCAG contrast checks
$0
Free forever, no account
New here? The whole workflow in four steps.
Pick a color
Browse named colors or paste any hex code.
Browse colors → 2Generate a palette
Harmonies and a full 50–900 scale from your base.
Open the generator → 3Check accessibility
WCAG contrast plus color-blindness safety.
Check contrast → 4Export the code
CSS variables, SCSS, Tailwind, or JSON — copy-ready.
See a palette →Understand the formats, not just the numbers.
Every color notation exists for a reason. Knowing which one to reach for — and when it will mislead you — is most of the job.
HEX & RGB — how screens store color
A HEX code like #3b82f6
is three bytes — one each for red, green, and blue light, from 0 to 255. It's the exact same
value as rgb(59, 130, 246),
written in base 16 instead of base 10. Neither is "more accurate"; HEX is just more compact
to copy, store, and share, which is why design systems standardize on it.
HSL & HSV — how designers think in color
Want "the same blue, just lighter"? In RGB that means changing all three channels at once. Hue-based models fix this: HSL separates hue, saturation, and lightness so a hover state is just "lightness +10%". HSV powers nearly every visual color picker for the same reason. The catch: their lightness numbers don't match perceived brightness, so verify contrast separately.
OKLCH & LAB — how the eye actually sees
Perceptual color spaces are built so equal numeric steps look like equal visual steps — something RGB and HSL can't promise. It's why Tailwind CSS defines its entire default palette in OKLCH now, why blending in OKLab avoids muddy midpoints, and how Delta E can put a number on "how different do these two colors look?"
Accessibility — color that everyone can read
Roughly 1 in 12 men has some form of color vision deficiency, and low-contrast text fails far more people than that. WCAG's contrast ratio puts a hard number on legibility — 4.5:1 for body text at level AA — and it's computable, not a matter of taste. Check it early, and never rely on color alone to carry meaning.
Start from a color people actually search for.
Every color page includes conversions across nine formats, harmonies, shades, tints, and WCAG contrast data.
Most viewed on Kolorvia
Brand color palettes
The documented color values of well-known products — for reference and design accuracy.
Learn the theory behind the tools.
Short, accurate guides — every formula they explain runs live in a tool on this site.
Design · 5 min
The Best Google Fonts for Resumes
A resume font has one job: stay invisible at 11 point while a recruiter skims for seconds. A shortlist built f...
Design · 4 min
The Best Google Fonts for Logos and Branding
A logo font needs a distinctive silhouette, not neutrality, and it must survive shrinking to a 16px favicon as...
Design · 5 min
The Best Google Fonts for UI and Product Design
A UI font has a different job than a display font: legible at 13px, a wide weight range, and restraint. Here a...
Tools · 3 min
Unicode "Fonts" Explained: How Text Generators Work — and When Not to Use Them
Fancy-text generators don't generate fonts at all — they swap your letters for mathematical Unicode symbols th...
Frequently asked questions
Yes — every tool on the site is free with no usage limits, no account, and no locked features. The site is supported by unobtrusive ads, which only load if you accept the cookie banner.
No. Every converter, generator, and the image color picker runs entirely in your browser. The values you type and the images you open never reach our servers.
HEX, RGB, HSL, HSV, CMYK, LAB, LCH, OKLCH, OKLab, HWB, and XYZ. Every color page shows all conversions at once, and the live converter updates in every direction as you type.
Conversions between screen formats (HEX, RGB, HSL, HSV, OKLCH, LAB) use the standard published formulas and are covered by automated tests against known reference values. CMYK is the one honest exception: print output depends on the specific press and paper profile, so CMYK values everywhere online — including here — are the standard device-independent approximation.
WCAG contrast is a computed ratio between text and background luminance, from 1:1 to 21:1. Level AA — 4.5:1 for normal text — is the threshold most accessibility regulations reference and the sensible default target. The contrast checker gives you pass/fail for both AA and AAA instantly.
Yes. Color values themselves are not copyrightable, and everything you generate here is yours to use in personal or commercial work without attribution. The one caution: pages documenting real brand colors are reference material — using another company's brand identity in your own commercial work may need their permission.
Ready to find your perfect palette?
Start from any color and let real color theory do the rest — or warm up with today's puzzle.