Színkonvertáló

Konvertálj hex, RGB, HSL, OKLCH és OKLAB között kontrasztellenőrzéssel és CSS-kész tokenek exportálásával.

Aktuális szín

#953769

Javasolt előtér

#FFFFFF

Komplementer szín

#007653

Hex

RGB(A)

HSL(A)

OKLCH

OKLAB

Alfa

Tailwind-téma

Generálj teljes márkapalettát Tailwind CSS 4-hez vagy 3-hoz az aktuális színből.

@theme {
  --color-brand-50: oklch(94.5% 0.0212 350.46);
  --color-brand-100: oklch(89.49% 0.0339 350.46);
  --color-brand-200: oklch(81.48% 0.0542 350.46);
  --color-brand-300: oklch(72.47% 0.0771 350.46);
  --color-brand-400: oklch(61.46% 0.105 350.46);
  --color-brand-500: oklch(48.44% 0.138 350.46);
  --color-brand-600: oklch(43.57% 0.1236 350.46);
  --color-brand-700: oklch(38.7% 0.1093 350.46);
  --color-brand-800: oklch(33.22% 0.0932 350.46);
  --color-brand-900: oklch(27.74% 0.077 350.46);
  --color-brand-950: oklch(23.48% 0.0644 350.46);
}

oklch(94.5% 0.0212 350.46)

100

oklch(89.49% 0.0339 350.46)

200

oklch(81.48% 0.0542 350.46)

300

oklch(72.47% 0.0771 350.46)

400

oklch(61.46% 0.105 350.46)

500

oklch(48.44% 0.138 350.46)

600

oklch(43.57% 0.1236 350.46)

700

oklch(38.7% 0.1093 350.46)

800

oklch(33.22% 0.0932 350.46)

900

oklch(27.74% 0.077 350.46)

950

oklch(23.48% 0.0644 350.46)

CSS-változók

:root {
  --brand: oklch(48.44% 0.138 350.46);
  --brand-rgb: rgb(149, 55, 105);
  --brand-foreground: #ffffff;
}

A CSS-színkonvertálásról

A színkonvertálók segítenek ugyanazt a színt HEX, RGB, HSL, OKLCH és OKLAB között mozgatni. Akkor a leghasznosabbak, ha olvasható kimenetre, kontrasztkörnyezetre és CSS-hez vagy Tailwindhez kész értékekre van szükség.

HEX, RGB, HSL és CSS-színek

A HEX, RGB és HSL lefedi a legtöbb mindennapi böngészős, dizájn- és frontend-munkafolyamatot.

A gyors konvertálás lehetővé teszi, hogy beillessz egy értéket, majd bárhol újrahasználd anélkül, hogy kézzel átírnád a szintaxist.

Miért fontos az OKLCH és az OKLAB

Az OKLCH és az OKLAB jobb sima skálák és kiszámítható fényességváltozások építéséhez.

Megkönnyítik a palettamunkát, ha kiegyensúlyozott átmenetek és megbízható kontraszt számít.

Kontrasztellenőrzések és Tailwind-kimenet

A kontrasztellenőrzések és a keretrendszerhez kész kimenet gyakorlati UI-eszközzé teszik a konvertálót.

Gyorsabban juthatsz el egy bemeneti színtől az akadálymentesen olvasható szövegválasztásokig és a Tailwind-barát tokenekig.

Gyakran ismételt kérdések

Válaszok a támogatott színformátumokról, arról, mikor érdemes perceptuális színtereket, például OKLCH-t használni, és hogyan kell értelmezni a kontraszt- és Tailwind-kimeneteket.

További eszközök

Böngészd az összes külön eszközoldalt a kezdőlap központjából vagy a középre igazított fejlécválasztóból.

Képek

WebP-konvertáló

Konvertálj legfeljebb 10 JPEG-, PNG- vagy WebP-képet WebP-vé minőségi presetekkel és ZIP-letöltésekkel.

Megnyitás WebP-konvertáló

Képek

Képvászon-igazító

Módosítsd egy kép vászonméretét anélkül, hogy magát a képet átméreteznéd. Állítsd be a méreteket, a kiterjesztés irányát, az átlátszóságot, majd töltsd le helyben.

Megnyitás Képvászon

Assetek