Design System Component Guide
- Primary Indigo#6366f1
- Secondary Coral#fb7185
- Surface Cream#fff7ed
- Border Fog#f5f5f5
- Text Graphite#1f2937
- Interactive Yellow#fde047
- Muted Gray#cbd5e1
Dibuat pada 06/28/2025 20:29
Palet terdiri dari Terang, Gelap warna. Warna aksen Primary Indigo #6366f1 dan Surface Cream #fff7ed. Palet memiliki suhu warna Dingin, Hangat, Netral.
Menurut kecerahan, palet ini dari #1F2937 (paling gelap) ke #FFF7ED (paling terang). Rentang kecerahan lebar.
Saturasi keseluruhan terasa hidup (chroma tinggi) — 57% warna cerah.
Beberapa warna hampir berseberangan di roda warna, memberi palet ini kontras komplementer.
Secara keseluruhan suhu warna condong ke dingin (3 dari 7).
Kode HEX (diurutkan): #1F2937, #6366F1, #CBD5E1, #F5F5F5, #FB7185, #FDE047, #FFF7ED
Palet Design System Component Guide menggabungkan 7 kode warna:
HEX: #6366f1, RGB: (99, 102, 241); HEX: #fb7185, RGB: (251, 113, 133); HEX: #fff7ed, RGB: (255, 247, 237)
HEX: #f5f5f5, RGB: (245, 245, 245); HEX: #1f2937, RGB: (31, 41, 55); HEX: #fde047, RGB: (253, 224, 71)
HEX: #cbd5e1, RGB: (203, 213, 225)
Versi warna palet yang disederhanakan
Nuansa gelap dari Biru batu sedang, Nuansa gelap dari Koral muda, Nuansa gelap dari Putih bunga, Asap putih, Nuansa terang dari Hitam, Nuansa terang dari Emas, Nuansa terang dari Abu-abu muda
Skema warna diciptakan oleh raccoon
Kode warna dalam palet
Design System Component Guide kode warna HEX, informasi RGB dalam tabel
| Warna | HEX | RGB | Nama | nama alternatif |
|---|---|---|---|---|
| #6366f1 | #6366f1 | RGB(99, 102, 241) | Primary Indigo | — |
| #fb7185 | #fb7185 | RGB(251, 113, 133) | Secondary Coral | — |
| #fff7ed | #fff7ed | RGB(255, 247, 237) | Surface Cream | Fatback |
| #f5f5f5 | #f5f5f5 | RGB(245, 245, 245) | Border Fog | Whitesmoke |
| #1f2937 | #1f2937 | RGB(31, 41, 55) | Text Graphite | — |
| #fde047 | #fde047 | RGB(253, 224, 71) | Interactive Yellow | — |
| #cbd5e1 | #cbd5e1 | RGB(203, 213, 225) | Muted Gray | — |
Kontras Palet Warna
8 pasangan warna memiliki kontras rendah dan perlu perbaikan, yang dapat memengaruhi keterbacaan.
| Warna teks | Warna latar belakang | Rasio Kontras |
|---|---|---|
#6366f1 | #fb7185 | 1.65 |
#fb7185 | #cbd5e1 | 1.81 |
#fff7ed | #f5f5f5 | 1.02 |
#fff7ed | #fde047 | 1.24 |
#fff7ed | #cbd5e1 | 1.39 |
#f5f5f5 | #fde047 | 1.2 |
Palet gambar Design System Component Guide png
Ekspor Palet
Unduh "Design System Component Guide" dalam berbagai format untuk integrasi yang mulus ke proyek desain Anda.
Format tersedia: