RevealTheme logo

Konverter Warna (HEX/RGB/HSL)

Konversikan warna antara format HEX, RGB, dan HSL. Pilih warna secara visual atau masukkan nilai secara manual.

HEX
#535beb
RGB
rgb(83, 91, 235)
HSL
hsl(237, 79%, 62%)

Cara menggunakan alat ini

  1. 1

    Click the color swatch to open your operating system's color picker and choose a color visually.

  2. 2

    Or type a 6-digit HEX value (such as #535beb, with or without the leading #) into the text field.

  3. 3

    Read the matching rgb(R, G, B) and hsl(H, S%, L%) strings in the result cards below.

  4. 4

    Copy whichever format you need straight into your CSS or design file.

Apa itu Konverter Warna (HEX/RGB/HSL)?

HEX, RGB, dan HSL adalah tiga cara untuk menyatakan warna yang sama. HEX (#RRGGBB) adalah yang paling umum dalam CSS dan alat desain. RGB (rgb(R,G,B)) memisahkan kanal secara numerik. HSL (hsl(H,S%,L%)) lebih intuitif bagi manusia: hue (rona) adalah warnanya, saturasi adalah intensitasnya, dan lightness (kecerahan) adalah tingkat terangnya. Gunakan HSL saat merancang palet; konversikan ke HEX untuk implementasi.

Kasus penggunaan umum

  • Translating a brand HEX code from a style guide into the rgb() values a legacy stylesheet or email template requires.

  • Grabbing the HSL form of a color so you can nudge its lightness or saturation while keeping the same hue for a palette.

  • Checking the exact RGB channels of a color picked from a screenshot or mockup before writing it into CSS.

  • Confirming what a designer's HEX swatch becomes in RGB for a canvas, SVG, or charting library that wants numeric channels.

  • Teaching or learning how hexadecimal color notation maps to decimal RGB and to the HSL model.

  • Quickly sampling a color visually with the picker and reading all three CSS-ready notations at once.

Pertanyaan yang sering diajukan

Kapan saya harus menggunakan HSL alih-alih HEX?
Saat merancang: HSL memungkinkan Anda menyesuaikan kecerahan atau saturasi secara independen. Kemudian konversikan ke HEX untuk kode.
Bagaimana dengan OKLCH dan ruang warna modern?
OKLCH seragam secara perseptual dan lebih baik untuk aksesibilitas. Ia didukung dalam CSS Color Level 4 (semua browser modern).

Alat terkait