Fonvira Pick the perfect color

Grab any color and Fonvira gives you the HEX, RGB and HSL values with a live preview you can copy in one click.

Pick a color HEX

rgb(219, 39, 119)

hsl(330, 73%, 51%)

Instant

Everything runs the moment you type — no waiting, no reloads.

Private

It all happens in your browser. Your input never leaves your device.

Free forever

Fonvira has no sign-ups, no paywalls and no limits.

How Fonvira works

Pick a color or paste a HEX value.

See the matching RGB and HSL values instantly.

Click copy and drop it straight into your stylesheet.

Fonvira — what it does and why it helps

Colour on the web is written three different ways, and the one you need depends on where you are pasting it. CSS and design tools love HEX, JavaScript and canvas work often want RGB, and anyone tweaking shades by hand reaches for HSL. Fonvira shows all three for any colour you pick, with a live preview, so you can grab the format your tool expects and move on.

Picking a colour is only half the job — the other half is making sure people can actually read the text on top of it. Fonvira is built around that everyday designer reality: choose a colour, copy the exact value, and check it works before it ships.

HEX, RGB and HSL — what each one is for

HEX — a six-digit code like #2563EB. Compact and the default in most design files and CSS.
RGB — red, green and blue from 0–255, like rgb(37, 99, 235). Easy to read into code and to add an alpha channel for transparency.
HSL — hue, saturation and lightness, like hsl(222, 83%, 53%). The friendliest format for making a colour lighter, darker or more muted by hand.

Make sure your text stays readable

Accessibility guidelines (WCAG) ask for a contrast ratio of at least 4.5:1 between normal text and its background, or 3:1 for large text (around 24px, or 19px bold). Light grey text on white is the classic offender — it looks elegant in a mock-up and disappears on a phone in sunlight. When you pick a colour for text, check it against its background before committing.

Working-with-colour tips

Keep a small palette — one or two accents plus neutrals usually beats a rainbow.
Use HSL when you need a hover or active state: nudge the lightness up or down a few percent.
Pure black text (#000) on white can feel harsh; a very dark grey often reads softer.
Save your brand HEX codes somewhere central so every page uses the exact same values.

Frequently asked questions

Which colour format should I copy from Fonvira?

Use HEX for CSS and design tools, RGB when you need transparency or are working in code, and HSL when you want to adjust a shade by hand. Fonvira gives you all three.

Are HEX and RGB the same colour?

Yes — they are just two notations for the same value. Fonvira converts between them precisely so the colour never shifts.

Can I get a transparent version of a colour?

Use the RGB value and add an alpha channel, e.g. rgba(37, 99, 235, 0.5) for 50% opacity.

Does Fonvira store the colours I pick?

No. Everything runs in your browser; the colours and values you generate stay on your device.

What contrast ratio do I need for readable text?

Aim for at least 4.5:1 for normal text and 3:1 for large text, the thresholds set by the WCAG accessibility guidelines.