Nazwany kolor · #FFC14B
Nârenji Orange
Nârenji Orange to #FFC14B: rgb(255 193 75), hsl(39 100% 65%), oklch(0.847 0.148 80.1). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Nârenji Orange color name →
#FFC14B
oklch(0.847 0.148 80.1)
Konwersje koloru
- HEX
- #ffc14b
- RGB
- rgb(255 193 75)
- HSL
- hsl(39 100% 65%)
- HWB
- hwb(39 29% 0%)
- OKLCH
- oklch(0.847 0.148 80.1)
- OKLab
- oklab(0.847 0.025 0.146)
- CIE Lab
- lab(82.33 14.92 65.55)
- LCH
- lch(82.33 67.23 77.2)
- CMYK
- cmyk(0% 24% 71% 0%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- FFC863
- FFCE78
- FFD58B
- FFDB9D
- FFE1AE
- FFE7BF
- FFEDCF
- FFF3DF
- FFF9EF
Odcienie ciemniejsze
- DEA740
- BE8F35
- 9E772B
- 805F21
- 634917
- 48340E
- 2E2006
- 160E02
- 030200
Tony
- F2BB55
- E5B45E
- D8AE65
- CBA76B
- BEA170
- B29B74
- A59478
- 998D7B
- 8C877E
Harmonie kolorów
Komplementarna +180°
- FFC14B
Nârenji Orange
- B0CEFF
≈ Night Snow
Analogowa -30° +30°
- FFC14B
Nârenji Orange
- FFBB96
≈ Peach Encounter
- D3D556
≈ Citrus Delight
Triada +120° +240°
- FFC14B
Nârenji Orange
- 00E8F2
≈ Whimsical Blue
- F1B2FF
≈ Strawberry Buttercream
Komplementarna rozszczepiona +150° +210°
- FFC14B
Nârenji Orange
- 89D9FF
≈ Tranquil Pool
- CCC4FF
≈ Innocent Snowdrop
Tetrada +90° +180° +270°
- FFC14B
Nârenji Orange
- 49ECBE
≈ Aphrodite Aqua
- B0CEFF
≈ Night Snow
- FFB2D6
≈ Lavender Candy
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.61:1 · APCA Lc 27
Ag
AAANa czerni
WCAG 12.98:1 · APCA Lc 75
Najlepszy kolor tekstu: #000000
WCAG 12.98:1 (AAA) · APCA Lc 75
Contrast pairs
Fragmenty kodu
CSS
:root {
--narenji-orange: #ffc14b;
--narenji-orange-rgb: 255 193 75;
--narenji-orange-oklch: oklch(0.847 0.148 80.1);
}
.element {
color: var(--narenji-orange);
background-color: hsl(39 100% 65%);
border-color: oklch(0.847 0.148 80.1);
}Tailwind CSS v4
@theme {
--color-narenji-orange: #ffc14b;
--color-narenji-orange-50: #fff2c6;
--color-narenji-orange-100: #ffe4b0;
--color-narenji-orange-200: #f4cf8a;
--color-narenji-orange-300: #ddb058;
--color-narenji-orange-400: #cc9314;
--color-narenji-orange-500: #b87700;
--color-narenji-orange-600: #9b6500;
--color-narenji-orange-700: #7d5100;
--color-narenji-orange-800: #5e3a00;
--color-narenji-orange-900: #422800;
--color-narenji-orange-950: #2a1500;
}SCSS
$narenji-orange: #ffc14b;
$narenji-orange-rgb: 255, 193, 75;
$narenji-orange-light: mix(#fff, $narenji-orange, 20%);
$narenji-orange-dark: mix(#000, $narenji-orange, 20%);
.element {
color: $narenji-orange;
box-shadow: 0 0 0 2px rgba($narenji-orange, 0.35);
}