bybence
Kapcsolat
bybence

Felfedezés

Eszközök

Academy

Blog

Hírek

Kapcsolat

ByBence Tools · Design

Színkód generátor

Válassz egy színt, kattints bármelyik kódra az automatikus másoláshoz, majd használd kész CSS, Chakra UI, React vagy Tailwind formában.

Szín kiválasztása

#2563EB

A megosztott URL ugyanazzal a színnel nyitja meg az eszközt.

Összes formátumHEX to RGBRGB to HEXHEX to HSLHSL to HEXRGB to HSLHSL to RGBHEX to CMYKCMYK to HEX

Színkód útmutató

Ne csak konvertálj: kapj azonnal másolható fejlesztői kódot és kapcsolódó színadatbázis-oldalt.

A színkód generátor ugyanazt a színt több reprezentációban mutatja. Ez praktikus, amikor designból fejlesztésbe viszel át értéket, régi HEX kódot modern CSS formára alakítasz, vagy egy UI tokenhez több platformon használható kimenet kell.

Minden értékkártya kattintható: egy kattintás automatikusan a vágólapra másolja a kódot, és vizuális toast jelzi a sikeres műveletet.

Alap

HEX

#RRGGBB

Csatornák

RGB

0–255 értékek.

Szerkesztés

HSL / HSV

Hue-alapú forma.

Modern

OKLCH

CSS Color 4 használathoz.

Mikor melyik formátum kényelmes?

01

HEX

Rövid, széles körben használt, design handoffban és CSS-ben is gyakori.

02

RGB

Közvetlen csatornaértékek, számoláshoz és programozási logikához jól használható.

03

HSL

A hue, saturation és lightness külön kezelhető, ezért kézi finomhangoláshoz intuitív.

04

OKLCH

Perceptuálisabb színskálákhoz és modern CSS rendszerekhez hasznos.

Külön URL a valódi konverziós keresésekhez

A gyakran önállóan keresett konverziók külön landinget kapnak, például HEX → RGB és RGB → HEX. Ezek nem ugyanannak az oldalnak vékony másolatai: a mezők, a title, a leírás és a példák a konkrét konverziós intenthez igazodnak.

A ritkább matematikai irányok szintén saját URL-en működnek, de noindex maradnak, hogy ne hígítsák a színkód klasztert és ne kannibalizálják a fontosabb kereséseket.

HEX → RGBRGB → HEXHEX → HSL

Kódexport valódi fejlesztéshez

Ugyanaz a szín több környezetben

ByBence Tools

/* CSS */
--brand-primary: #2563EB;

// Chakra UI
<Box bg="#2563EB" />

// React
const style = { backgroundColor: "#2563EB" };

<!-- Tailwind -->
<div class="bg-[#2563EB]" />

Gyakori kérdések

Mi történik, ha egy színkódra kattintok?

Az érték automatikusan a vágólapra kerül, és toast visszajelzés jelzi a sikeres másolást.

Milyen kódot ad a generátor?

HEX, RGB, HSL, HSV, CMYK és OKLCH formátumokat, valamint CSS, Chakra UI, React és Tailwind példákat.

Megosztható egy konkrét szín?

Igen. A megosztott URL megőrzi a HEX értéket, és az Open Graph előnézet is az aktuális színt mutatja.

Kapcsolódó eszközök és útmutatók

Eszköz

Color Picker

Precíz vizuális színválasztás.

Eszköz

Színátmenet generátor

Többpontos CSS gradient.

Eszköz

Színkeverő

Színek keverése különböző modellekben.

Útmutató

HEX, RGB és HSL útmutató

Részletes háttér, példák és gyakori hibák.