Referensi Warna Bernama CSS

Cari, filter, dan salin semua 148 warna bernama CSS beserta nilai HEX, RGB, dan HSL-nya. Filter berdasarkan 12 keluarga warna - merah, oranye, kuning, hijau, sian, biru, ungu, merah muda, cokelat, putih, abu-abu, dan hitam. Klik tombol salin mana pun untuk menyalin nama warna, HEX, atau nilai RGB secara instan. Sepenuhnya privat, 100% gratis, dan tanpa pendaftaran.

CSS Named Colors Reference

Search, filter, and copy all 146 CSS named colors. Click any copy button to copy the color name, HEX, or RGB value to your clipboard instantly.

Showing 146 of 146 CSS named colors

CSS Color Level 4

#ff0000

Red

red

rgb(255, 0, 0)

hsl(0, 100%, 50%)

#8b0000

Dark Red

darkred

rgb(139, 0, 0)

hsl(0, 100%, 27%)

#b22222

Firebrick

firebrick

rgb(178, 34, 34)

hsl(0, 68%, 42%)

#dc143c

Crimson

crimson

rgb(220, 20, 60)

hsl(348, 83%, 47%)

#cd5c5c

Indian Red

indianred

rgb(205, 92, 92)

hsl(0, 53%, 58%)

#f08080

Light Coral

lightcoral

rgb(240, 128, 128)

hsl(0, 79%, 72%)

#fa8072

Salmon

salmon

rgb(250, 128, 114)

hsl(6, 93%, 71%)

#e9967a

Dark Salmon

darksalmon

rgb(233, 150, 122)

hsl(15, 72%, 70%)

#ffa07a

Light Salmon

lightsalmon

rgb(255, 160, 122)

hsl(17, 100%, 74%)

#ff6347

Tomato

tomato

rgb(255, 99, 71)

hsl(9, 100%, 64%)

#ff4500

Orange Red

orangered

rgb(255, 69, 0)

hsl(16, 100%, 50%)

#ffa500

Orange

orange

rgb(255, 165, 0)

hsl(39, 100%, 50%)

#ff8c00

Dark Orange

darkorange

rgb(255, 140, 0)

hsl(33, 100%, 50%)

#ff7f50

Coral

coral

rgb(255, 127, 80)

hsl(16, 100%, 66%)

#ffff00

Yellow

yellow

rgb(255, 255, 0)

hsl(60, 100%, 50%)

#ffd700

Gold

gold

rgb(255, 215, 0)

hsl(51, 100%, 50%)

#ffffe0

Light Yellow

lightyellow

rgb(255, 255, 224)

hsl(60, 100%, 94%)

#fffacd

Lemon Chiffon

lemonchiffon

rgb(255, 250, 205)

hsl(54, 100%, 90%)

#fafad2

Light Goldenrod Yellow

lightgoldenrodyellow

rgb(250, 250, 210)

hsl(60, 80%, 90%)

#ffefd5

Papaya Whip

papayawhip

rgb(255, 239, 213)

hsl(37, 100%, 92%)

#ffe4b5

Moccasin

moccasin

rgb(255, 228, 181)

hsl(38, 100%, 85%)

#ffdab9

Peach Puff

peachpuff

rgb(255, 218, 185)

hsl(28, 100%, 86%)

#eee8aa

Pale Goldenrod

palegoldenrod

rgb(238, 232, 170)

hsl(55, 67%, 80%)

#f0e68c

Khaki

khaki

rgb(240, 230, 140)

hsl(54, 77%, 75%)

#bdb76b

Dark Khaki

darkkhaki

rgb(189, 183, 107)

hsl(56, 38%, 58%)

#008000

Green

green

rgb(0, 128, 0)

hsl(120, 100%, 25%)

#006400

Dark Green

darkgreen

rgb(0, 100, 0)

hsl(120, 100%, 20%)

#00ff00

Lime

lime

rgb(0, 255, 0)

hsl(120, 100%, 50%)

#32cd32

Lime Green

limegreen

rgb(50, 205, 50)

hsl(120, 61%, 50%)

#228b22

Forest Green

forestgreen

rgb(34, 139, 34)

hsl(120, 61%, 34%)

#2e8b57

Sea Green

seagreen

rgb(46, 139, 87)

hsl(146, 50%, 36%)

#8fbc8f

Dark Sea Green

darkseagreen

rgb(143, 188, 143)

hsl(120, 25%, 65%)

#3cb371

Medium Sea Green

mediumseagreen

rgb(60, 179, 113)

hsl(147, 50%, 47%)

#20b2aa

Light Sea Green

lightseagreen

rgb(32, 178, 170)

hsl(177, 70%, 41%)

#00ff7f

Spring Green

springgreen

rgb(0, 255, 127)

hsl(150, 100%, 50%)

#00fa9a

Medium Spring Green

mediumspringgreen

rgb(0, 250, 154)

hsl(157, 100%, 49%)

#adff2f

Green Yellow

greenyellow

rgb(173, 255, 47)

hsl(84, 100%, 59%)

#7fff00

Chartreuse

chartreuse

rgb(127, 255, 0)

hsl(90, 100%, 50%)

#7cfc00

Lawn Green

lawngreen

rgb(124, 252, 0)

hsl(90, 100%, 49%)

#9acd32

Yellow Green

yellowgreen

rgb(154, 205, 50)

hsl(80, 61%, 50%)

#6b8e23

Olive Drab

olivedrab

rgb(107, 142, 35)

hsl(80, 60%, 35%)

#808000

Olive

olive

rgb(128, 128, 0)

hsl(60, 100%, 25%)

#556b2f

Dark Olive Green

darkolivegreen

rgb(85, 107, 47)

hsl(82, 39%, 30%)

#98fb98

Pale Green

palegreen

rgb(152, 251, 152)

hsl(120, 93%, 79%)

#90ee90

Light Green

lightgreen

rgb(144, 238, 144)

hsl(120, 73%, 75%)

#66cdaa

Medium Aquamarine

mediumaquamarine

rgb(102, 205, 170)

hsl(160, 51%, 60%)

#00ffff

Cyan

cyan

rgb(0, 255, 255)

hsl(180, 100%, 50%)

#00ffff

Aqua

aqua

rgb(0, 255, 255)

hsl(180, 100%, 50%)

#008b8b

Dark Cyan

darkcyan

rgb(0, 139, 139)

hsl(180, 100%, 27%)

#008080

Teal

teal

rgb(0, 128, 128)

hsl(180, 100%, 25%)

#7fffd4

Aquamarine

aquamarine

rgb(127, 255, 212)

hsl(160, 100%, 75%)

#40e0d0

Turquoise

turquoise

rgb(64, 224, 208)

hsl(174, 72%, 56%)

#48d1cc

Medium Turquoise

mediumturquoise

rgb(72, 209, 204)

hsl(178, 60%, 55%)

#00ced1

Dark Turquoise

darkturquoise

rgb(0, 206, 209)

hsl(181, 100%, 41%)

#e0ffff

Light Cyan

lightcyan

rgb(224, 255, 255)

hsl(180, 100%, 94%)

#afeeee

Pale Turquoise

paleturquoise

rgb(175, 238, 238)

hsl(180, 65%, 81%)

#b0e0e6

Powder Blue

powderblue

rgb(176, 224, 230)

hsl(187, 52%, 80%)

#add8e6

Light Blue

lightblue

rgb(173, 216, 230)

hsl(195, 53%, 79%)

#0000ff

Blue

blue

rgb(0, 0, 255)

hsl(240, 100%, 50%)

#00008b

Dark Blue

darkblue

rgb(0, 0, 139)

hsl(240, 100%, 27%)

#000080

Navy

navy

rgb(0, 0, 128)

hsl(240, 100%, 25%)

#0000cd

Medium Blue

mediumblue

rgb(0, 0, 205)

hsl(240, 100%, 40%)

#4169e1

Royal Blue

royalblue

rgb(65, 105, 225)

hsl(225, 73%, 57%)

#6495ed

Cornflower Blue

cornflowerblue

rgb(100, 149, 237)

hsl(219, 79%, 66%)

#1e90ff

Dodger Blue

dodgerblue

rgb(30, 144, 255)

hsl(210, 100%, 56%)

#00bfff

Deep Sky Blue

deepskyblue

rgb(0, 191, 255)

hsl(195, 100%, 50%)

#87ceeb

Sky Blue

skyblue

rgb(135, 206, 235)

hsl(197, 71%, 73%)

#87cefa

Light Sky Blue

lightskyblue

rgb(135, 206, 250)

hsl(203, 92%, 75%)

#4682b4

Steel Blue

steelblue

rgb(70, 130, 180)

hsl(207, 44%, 49%)

#b0c4de

Light Steel Blue

lightsteelblue

rgb(176, 196, 222)

hsl(214, 41%, 78%)

#5f9ea0

Cadet Blue

cadetblue

rgb(95, 158, 160)

hsl(182, 25%, 50%)

#191970

Midnight Blue

midnightblue

rgb(25, 25, 112)

hsl(240, 64%, 27%)

#f0f8ff

Alice Blue

aliceblue

rgb(240, 248, 255)

hsl(208, 100%, 97%)

#e6e6fa

Lavender

lavender

rgb(230, 230, 250)

hsl(240, 67%, 94%)

#f8f8ff

Ghost White

ghostwhite

rgb(248, 248, 255)

hsl(240, 100%, 99%)

#f0ffff

Azure

azure

rgb(240, 255, 255)

hsl(180, 100%, 97%)

#800080

Purple

purple

rgb(128, 0, 128)

hsl(300, 100%, 25%)

#9400d3

Dark Violet

darkviolet

rgb(148, 0, 211)

hsl(282, 100%, 41%)

#9932cc

Dark Orchid

darkorchid

rgb(153, 50, 204)

hsl(280, 61%, 50%)

#8b008b

Dark Magenta

darkmagenta

rgb(139, 0, 139)

hsl(300, 100%, 27%)

#8a2be2

Blue Violet

blueviolet

rgb(138, 43, 226)

hsl(271, 76%, 53%)

#4b0082

Indigo

indigo

rgb(75, 0, 130)

hsl(275, 100%, 25%)

#6a5acd

Slate Blue

slateblue

rgb(106, 90, 205)

hsl(248, 53%, 58%)

#7b68ee

Medium Slate Blue

mediumslateblue

rgb(123, 104, 238)

hsl(249, 80%, 67%)

#483d8b

Dark Slate Blue

darkslateblue

rgb(72, 61, 139)

hsl(248, 39%, 39%)

#9370db

Medium Purple

mediumpurple

rgb(147, 112, 219)

hsl(260, 60%, 65%)

#663399

Rebecca Purple

rebeccapurple

rgb(102, 51, 153)

hsl(270, 50%, 40%)

#ee82ee

Violet

violet

rgb(238, 130, 238)

hsl(300, 76%, 72%)

#da70d6

Orchid

orchid

rgb(218, 112, 214)

hsl(302, 59%, 65%)

#ba55d3

Medium Orchid

mediumorchid

rgb(186, 85, 211)

hsl(288, 59%, 58%)

#dda0dd

Plum

plum

rgb(221, 160, 221)

hsl(300, 47%, 75%)

#d8bfd8

Thistle

thistle

rgb(216, 191, 216)

hsl(300, 24%, 80%)

#fff0f5

Lavender Blush

lavenderblush

rgb(255, 240, 245)

hsl(340, 100%, 97%)

#ff00ff

Magenta

magenta

rgb(255, 0, 255)

hsl(300, 100%, 50%)

#ff00ff

Fuchsia

fuchsia

rgb(255, 0, 255)

hsl(300, 100%, 50%)

#ff1493

Deep Pink

deeppink

rgb(255, 20, 147)

hsl(328, 100%, 54%)

#ff69b4

Hot Pink

hotpink

rgb(255, 105, 180)

hsl(330, 100%, 71%)

#ffc0cb

Pink

pink

rgb(255, 192, 203)

hsl(350, 100%, 88%)

#ffb6c1

Light Pink

lightpink

rgb(255, 182, 193)

hsl(351, 100%, 86%)

#db7093

Pale Violet Red

palevioletred

rgb(219, 112, 147)

hsl(340, 60%, 65%)

#c71585

Medium Violet Red

mediumvioletred

rgb(199, 21, 133)

hsl(322, 81%, 43%)

#ffe4e1

Misty Rose

mistyrose

rgb(255, 228, 225)

hsl(6, 100%, 94%)

#a52a2a

Brown

brown

rgb(165, 42, 42)

hsl(0, 59%, 41%)

#8b4513

Saddle Brown

saddlebrown

rgb(139, 69, 19)

hsl(25, 76%, 31%)

#a0522d

Sienna

sienna

rgb(160, 82, 45)

hsl(19, 56%, 40%)

#d2691e

Chocolate

chocolate

rgb(210, 105, 30)

hsl(25, 75%, 47%)

#cd853f

Peru

peru

rgb(205, 133, 63)

hsl(30, 59%, 53%)

#f4a460

Sandy Brown

sandybrown

rgb(244, 164, 96)

hsl(28, 87%, 67%)

#deb887

Burlywood

burlywood

rgb(222, 184, 135)

hsl(34, 57%, 70%)

#d2b48c

Tan

tan

rgb(210, 180, 140)

hsl(34, 44%, 69%)

#bc8f8f

Rosy Brown

rosybrown

rgb(188, 143, 143)

hsl(0, 25%, 65%)

#800000

Maroon

maroon

rgb(128, 0, 0)

hsl(0, 100%, 25%)

#f5deb3

Wheat

wheat

rgb(245, 222, 179)

hsl(39, 77%, 83%)

#ffdead

Navajo White

navajowhite

rgb(255, 222, 173)

hsl(36, 100%, 84%)

#ffe4c4

Bisque

bisque

rgb(255, 228, 196)

hsl(33, 100%, 88%)

#ffebcd

Blanched Almond

blanchedalmond

rgb(255, 235, 205)

hsl(36, 100%, 90%)

#fff8dc

Cornsilk

cornsilk

rgb(255, 248, 220)

hsl(48, 100%, 93%)

#fdf5e6

Old Lace

oldlace

rgb(253, 245, 230)

hsl(39, 85%, 95%)

#faf0e6

Linen

linen

rgb(250, 240, 230)

hsl(30, 67%, 94%)

#faebd7

Antique White

antiquewhite

rgb(250, 235, 215)

hsl(34, 78%, 91%)

#ffffff

White

white

rgb(255, 255, 255)

hsl(0, 0%, 100%)

#fffafa

Snow

snow

rgb(255, 250, 250)

hsl(0, 100%, 99%)

#f0fff0

Honeydew

honeydew

rgb(240, 255, 240)

hsl(120, 100%, 97%)

#f5fffa

Mint Cream

mintcream

rgb(245, 255, 250)

hsl(150, 100%, 98%)

#fffff0

Ivory

ivory

rgb(255, 255, 240)

hsl(60, 100%, 97%)

#fffaf0

Floral White

floralwhite

rgb(255, 250, 240)

hsl(40, 100%, 97%)

#fff5ee

Seashell

seashell

rgb(255, 245, 238)

hsl(25, 100%, 97%)

#f5f5dc

Beige

beige

rgb(245, 245, 220)

hsl(60, 56%, 91%)

#f5f5f5

White Smoke

whitesmoke

rgb(245, 245, 245)

hsl(0, 0%, 96%)

#808080

Gray

gray

rgb(128, 128, 128)

hsl(0, 0%, 50%)

#808080

Grey

grey

rgb(128, 128, 128)

hsl(0, 0%, 50%)

#a9a9a9

Dark Gray

darkgray

rgb(169, 169, 169)

hsl(0, 0%, 66%)

#a9a9a9

Dark Grey

darkgrey

rgb(169, 169, 169)

hsl(0, 0%, 66%)

#d3d3d3

Light Gray

lightgray

rgb(211, 211, 211)

hsl(0, 0%, 83%)

#d3d3d3

Light Grey

lightgrey

rgb(211, 211, 211)

hsl(0, 0%, 83%)

#c0c0c0

Silver

silver

rgb(192, 192, 192)

hsl(0, 0%, 75%)

#dcdcdc

Gainsboro

gainsboro

rgb(220, 220, 220)

hsl(0, 0%, 86%)

#696969

Dim Gray

dimgray

rgb(105, 105, 105)

hsl(0, 0%, 41%)

#696969

Dim Grey

dimgrey

rgb(105, 105, 105)

hsl(0, 0%, 41%)

#708090

Slate Gray

slategray

rgb(112, 128, 144)

hsl(210, 13%, 50%)

#708090

Slate Grey

slategrey

rgb(112, 128, 144)

hsl(210, 13%, 50%)

#778899

Light Slate Gray

lightslategray

rgb(119, 136, 153)

hsl(210, 14%, 53%)

#778899

Light Slate Grey

lightslategrey

rgb(119, 136, 153)

hsl(210, 14%, 53%)

#2f4f4f

Dark Slate Gray

darkslategray

rgb(47, 79, 79)

hsl(180, 25%, 25%)

#2f4f4f

Dark Slate Grey

darkslategrey

rgb(47, 79, 79)

hsl(180, 25%, 25%)

#000000

Black

black

rgb(0, 0, 0)

hsl(0, 0%, 0%)

Mengapa Menggunakan Referensi Warna Bernama CSS Kami?

Pencarian Instan di Semua 148 Warna: Referensi warna bernama CSS mencari secara real-time di nama warna, nilai HEX, nilai RGB, dan nilai HSL. Temukan warna apa pun secara instan dengan mengetik nama, kode hex, atau nilai RGB-nya.
Filter Berdasarkan Keluarga Warna: Filter referensi berdasarkan 12 keluarga warna - merah, oranye, kuning, hijau, sian, biru, ungu, merah muda, cokelat, putih, abu-abu, dan hitam. Jelajahi cepat semua warna dalam rentang warna tertentu.
100% Privat - Tanpa Unggahan: Referensi warna bernama CSS berjalan sepenuhnya di browser Anda. Tidak ada data yang pernah dikirim ke server mana pun - aman untuk penggunaan offline dan pekerjaan desain privat.
Gratis & Tanpa Batas: Jelajahi dan salin warna bernama CSS tanpa batas tanpa pendaftaran, langganan, atau batas penggunaan. Referensi warna bernama CSS sepenuhnya gratis selamanya tanpa iklan yang menghalangi antarmuka.

Kasus Penggunaan Umum Referensi Warna Bernama CSS

Pengembangan CSS & HTML: Pengembang frontend memakai referensi warna bernama CSS untuk cepat mencari nama warna yang akan dipakai di stylesheet CSS dan atribut HTML. Salin nama warna CSS yang tepat, HEX, atau nilai RGB dengan satu klik.
Desain & Prototipe: Desainer memakai referensi warna bernama CSS untuk menemukan warna bernama yang aman untuk mockup dan prototipe. Filter keluarga warna memudahkan menjelajahi semua warna biru, hijau, atau merah sekaligus.
Aksesibilitas & Pemeriksaan Kontras: Spesialis aksesibilitas memakai referensi untuk mengidentifikasi warna bernama lalu memeriksa rasio kontrasnya. Nilai HEX dan RGB bisa ditempel langsung ke alat pemeriksa kontras.
Belajar CSS & Desain Web: Pelajar dan pemula memakai referensi warna bernama CSS untuk mempelajari nama warna apa saja yang tersedia di CSS. Melihat contoh warna sebenarnya di samping namanya memudahkan mengingat nama mana untuk warna mana.
Pengembangan Template Email: Pengembang email memakai referensi untuk menemukan warna bernama yang aman dipakai di klien email HTML. Warna bernama punya dukungan luas di klien email yang mungkin tidak mendukung fungsi warna CSS modern.
Dokumentasi Design System: Tim design system memakai referensi untuk mendokumentasikan warna bernama CSS mana yang dipakai di sistem mereka dan untuk menemukan padanan HEX bagi design token dan gaya warna Figma.

Apa Itu Warna Bernama CSS?

Warna bernama CSS adalah kata kunci warna yang telah ditentukan dan bisa dipakai langsung di CSS tanpa menentukan nilai HEX, RGB, atau HSL. Misalnya, color: cornflowerblue setara dengan color: #6495ed. Spesifikasi CSS mendefinisikan 148 warna bernama, mulai dari warna dasar seperti red dan blue hingga nama yang lebih deskriptif seperti rebeccapurple dan papayawhip. Referensi warna bernama CSS kami mencantumkan semua 148 beserta padanan HEX, RGB, dan HSL-nya.

Cara Kerja Referensi Warna Bernama CSS Kami

Cari berdasarkan nama, HEX, atau RGB: Ketik bagian mana pun dari nama warna (mis. «blue», «coral»), nilai HEX (mis. «#ff7f50»), atau nilai RGB untuk memfilter referensi secara instan.
Filter berdasarkan keluarga warna: Klik chip keluarga mana pun - Merah, Oranye, Kuning, Hijau, Sian, Biru, Ungu, Merah Muda, Cokelat, Putih, Abu-abu, atau Hitam - untuk menampilkan hanya warna di keluarga itu. Kombinasikan dengan pencarian untuk penyaringan yang presisi.
Salin dengan satu klik: Setiap kartu warna punya tiga tombol salin - Nama, HEX, dan RGB. Klik tombol mana pun untuk menyalin nilai itu ke clipboard secara instan. Semua pemrosesan berjalan lokal di browser Anda.

Apa Saja Isi Referensi Warna Bernama CSS

Nama warna CSS: kata kunci tepat untuk dipakai di CSS (mis. cornflowerblue).
Nilai HEX: padanan heksadesimal 6 digit (mis. #6495ed).
Nilai RGB: nilai kanal merah, hijau, dan biru (mis. rgb(100, 149, 237)).
Nilai HSL: nilai hue, saturasi, dan kecerahan (mis. hsl(219, 79%, 66%)).

Catatan tentang Warna Duplikat

Sebagian warna bernama CSS merupakan duplikat persis satu sama lain. Misalnya, aqua dan cyan sama-sama memetakan ke #00ffff, dan fuchsia serta magenta sama-sama memetakan ke #ff00ff. Demikian pula, gray dan grey (beserta variannya) identik. Referensi warna bernama CSS memuat semua 148 nama resmi, termasuk duplikat ini, karena kedua ejaan valid dalam CSS.

Pertanyaan yang Sering Diajukan

Referensi warna bernama CSS adalah daftar yang dapat dicari dan difilter dari semua 148 warna bernama CSS beserta nilai HEX, RGB, dan HSL-nya. Anda dapat mencari berdasarkan nama warna, HEX, atau nilai RGB, memfilter berdasarkan keluarga warna, dan menyalin nilai apa pun dengan satu klik. Semuanya berjalan di browser Anda tanpa data yang dikirim ke server.

Spesifikasi CSS Color Level 4 mendefinisikan 148 warna bernama. Ini mencakup 16 warna dasar dari HTML 4.01, 140 warna X11 yang diadopsi CSS2.1, serta warna khusus «rebeccapurple» yang ditambahkan di CSS Color Level 4 untuk menghormati Rebecca Meyer.

Ya. Semua 148 warna bernama CSS didukung di setiap browser modern termasuk Chrome, Firefox, Safari, Edge, dan Opera. Warna ini juga didukung di browser lama hingga IE9. Warna bernama adalah salah satu fitur CSS dengan dukungan paling universal.

Ya. Referensi warna bernama CSS 100% gratis tanpa pendaftaran, tanpa fitur premium, dan tanpa batas penggunaan. Jelajahi dan salin warna tanpa batas tanpa batasan atau biaya tersembunyi.

Spesifikasi CSS mencakup ejaan bahasa Inggris Amerika (gray) dan Inggris Britania (grey) untuk beberapa warna, dan keduanya valid dalam CSS. Demikian pula, «aqua» dan «cyan» adalah warna identik dengan nama berbeda, begitu juga «fuchsia» dan «magenta». Referensi ini memuat semua 148 nama resmi termasuk duplikat tersebut.

Rebeccapurple (#663399) ditambahkan ke spesifikasi CSS Color Level 4 pada 2014 untuk menghormati Rebecca Alison Meyer, putri pegiat standar web Eric Meyer, yang meninggal pada hari ulang tahunnya yang keenam. Ini satu-satunya warna bernama CSS yang diambil dari nama seseorang.

Tailwind CSS tidak memakai warna bernama CSS di palet bawaannya - Tailwind memakai sistem warna sendiri dengan skala numerik (misalnya blue-500). Namun, Anda bisa memakai warna bernama CSS pada nilai arbitrer Tailwind: text-[cornflowerblue] atau bg-[coral]. Anda juga bisa menambahkan warna bernama ke tema tailwind.config.js Anda.

Tidak. Nama warna CSS tidak peka huruf besar-kecil. «CornflowerBlue», «cornflowerblue», dan «CORNFLOWERBLUE» semuanya valid dan setara. Gaya yang lazim adalah huruf kecil semua, seperti yang ditampilkan referensi warna bernama CSS.