Adlandırılmış renk · #F4915C
Orange Slice
Orange Slice, #F4915C: rgb(244 145 92), hsl(21 87% 66%), oklch(0.751 0.138 47.9). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Orange mean? → · Orange Slice color name →
#F4915C
oklch(0.751 0.138 47.9)
Renk dönüşümleri
- HEX
- #f4915c
- RGB
- rgb(244 145 92)
- HSL
- hsl(21 87% 66%)
- HWB
- hwb(21 36% 4%)
- OKLCH
- oklch(0.751 0.138 47.9)
- OKLab
- oklab(0.751 0.093 0.102)
- CIE Lab
- lab(70.23 35 44.52)
- LCH
- lch(70.23 56.63 51.8)
- CMYK
- cmyk(0% 41% 62% 4%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- F69D6E
- F8A87E
- FAB38F
- FCBE9F
- FDC9AF
- FED4BF
- FFDFCF
- FFEADF
- FFF4EF
Koyu tonlar
- D47D4F
- B56A42
- 975836
- 7A462A
- 5E351F
- 442514
- 2B150A
- 140703
- 030100
Gri tonlar
- E99061
- DD8F66
- D28D6A
- C68C6E
- BB8A72
- AF8975
- A48778
- 98857B
- 8C827E
Renk uyumları
Tamamlayıcı +180°
- F4915C
Orange Slice
- 28BEF2
≈ Blue Bikini
Analog -30° +30°
- F4915C
Orange Slice
- F9878D
≈ Tulip
- DEA236
≈ Courgette Yellow
Üçlü +120° +240°
- F4915C
Orange Slice
- 36CA9D
≈ Dark Shamrock
- AA9FFF
≈ Shy Moment
Bölünmüş tamamlayıcı +150° +210°
- F4915C
Orange Slice
- 00C6CB
≈ Turquoise Surf
- 79AFFF
≈ Fennel Flower
Dörtlü +90° +180° +270°
- F4915C
Orange Slice
- 81C26A
≈ Hillside Grove
- 28BEF2
≈ Blue Bikini
- D291E7
≈ Bright Lilac
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 2.32:1 · APCA Lc 45
Ag
AAASiyah üzerinde
WCAG 9.05:1 · APCA Lc 57
En iyi metin rengi: #000000
WCAG 9.05:1 (AAA) · APCA Lc 57
Contrast pairs
Kod parçacıkları
CSS
:root {
--orange-slice: #f4915c;
--orange-slice-rgb: 244 145 92;
--orange-slice-oklch: oklch(0.751 0.138 47.9);
}
.element {
color: var(--orange-slice);
background-color: hsl(21 87% 66%);
border-color: oklch(0.751 0.138 47.9);
}Tailwind CSS v4
@theme {
--color-orange-slice: #f4915c;
--color-orange-slice-50: #ffebd3;
--color-orange-slice-100: #ffdbbf;
--color-orange-slice-200: #ffc39f;
--color-orange-slice-300: #f1a276;
--color-orange-slice-400: #df8351;
--color-orange-slice-500: #cd6424;
--color-orange-slice-600: #ad5521;
--color-orange-slice-700: #8b441a;
--color-orange-slice-800: #683013;
--color-orange-slice-900: #49210c;
--color-orange-slice-950: #301001;
}SCSS
$orange-slice: #f4915c;
$orange-slice-rgb: 244, 145, 92;
$orange-slice-light: mix(#fff, $orange-slice, 20%);
$orange-slice-dark: mix(#000, $orange-slice, 20%);
.element {
color: $orange-slice;
box-shadow: 0 0 0 2px rgba($orange-slice, 0.35);
}