Warna bernama · #FF4E01
Magma
Magma adalah #FF4E01: rgb(255 78 1), hsl(18 100% 50%), oklch(0.669 0.223 37.1). Lihat tint, shade, harmoni, kontras WCAG & APCA, serta kode CSS, Tailwind v4, dan SCSS.
What does Red mean? → · Magma color name →
#FF4E01
oklch(0.669 0.223 37.1)
Konversi warna
- HEX
- #ff4e01
- RGB
- rgb(255 78 1)
- HSL
- hsl(18 100% 50%)
- HWB
- hwb(18 0% 0%)
- OKLCH
- oklch(0.669 0.223 37.1)
- OKLab
- oklab(0.669 0.178 0.135)
- CIE Lab
- lab(59.63 66.23 71.07)
- LCH
- lch(59.63 97.14 47)
- CMYK
- cmyk(0% 69% 100% 0%)
Tint · Shade · Tone
Tint
- FF6535
- FF7A51
- FF8C69
- FF9E7F
- FFAF95
- FFBFAA
- FFD0BF
- FFE0D4
- FFEFEA
Shade
- DE4301
- BE3801
- 9E2D00
- 802300
- 631900
- 480F00
- 2E0700
- 160200
- 030000
Tone
- F35825
- E86036
- DC6644
- D06C4F
- C47158
- B77561
- AA786A
- 9D7B71
- 8F7E79
Harmoni warna
Komplementer +180°
- FF4E01
Magma
- 00A6C5
≈ True Sky Blue
Analog -30° +30°
- FF4E01
Magma
- FC427D
≈ Diva Pink
- D08000
≈ Copious Caramel
Triadik +120° +240°
- FF4E01
Magma
- 00B16C
≈ Jade Powder
- 7C85FF
≈ Orchid
Split-komplementer +150° +210°
Tetradik +90° +180° +270°
Kontras & aksesibilitas
Ag
FailDi atas putih
WCAG 3.31:1 · APCA Lc 59
Ag
AADi atas hitam
WCAG 6.34:1 · APCA Lc 43
Warna teks terbaik: #000000
WCAG 6.34:1 (AA) · APCA Lc 43
Contrast pairs
Cuplikan kode
CSS
:root {
--magma: #ff4e01;
--magma-rgb: 255 78 1;
--magma-oklch: oklch(0.669 0.223 37.1);
}
.element {
color: var(--magma);
background-color: hsl(18 100% 50%);
border-color: oklch(0.669 0.223 37.1);
}Tailwind CSS v4
@theme {
--color-magma: #ff4e01;
--color-magma-50: #ffe0c6;
--color-magma-100: #ffceb0;
--color-magma-200: #ffb18b;
--color-magma-300: #ff895a;
--color-magma-400: #ff5f29;
--color-magma-500: #f62700;
--color-magma-600: #cf2500;
--color-magma-700: #a71f00;
--color-magma-800: #7d1200;
--color-magma-900: #590c00;
--color-magma-950: #3b0000;
}SCSS
$magma: #ff4e01;
$magma-rgb: 255, 78, 1;
$magma-light: mix(#fff, $magma, 20%);
$magma-dark: mix(#000, $magma, 20%);
.element {
color: $magma;
box-shadow: 0 0 0 2px rgba($magma, 0.35);
}