Nazwany kolor · #FD7F22
Orange You Happy?
Orange You Happy? to #FD7F22: rgb(253 127 34), hsl(25 98% 56%), oklch(0.729 0.18 50.5). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Orange You Happy? color name →
#FD7F22
oklch(0.729 0.18 50.5)
Konwersje koloru
- HEX
- #fd7f22
- RGB
- rgb(253 127 34)
- HSL
- hsl(25 98% 56%)
- HWB
- hwb(25 13% 1%)
- OKLCH
- oklch(0.729 0.18 50.5)
- OKLab
- oklab(0.729 0.114 0.139)
- CIE Lab
- lab(67.4 45.48 67.56)
- LCH
- lch(67.4 81.44 56)
- CMYK
- cmyk(0% 50% 87% 1%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- FF8D44
- FF9B5D
- FFA874
- FFB589
- FFC29D
- FFCEB1
- FFDBC4
- FFE7D8
- FFF3EB
Odcienie ciemniejsze
- DC6E1C
- BC5D16
- 9D4C11
- 7F3C0B
- 622D07
- 471F03
- 2D1101
- 160600
- 030100
Tony
- F18136
- E58243
- D9824E
- CC8358
- C08360
- B48368
- A7836E
- 9A8275
- 8D817A
Harmonie kolorów
Komplementarna +180°
- FD7F22
Orange You Happy?
- 00B6F1
≈ Zima Blue
Analogowa -30° +30°
- FD7F22
Orange You Happy?
- FF7679
≈ Embarrassment
- D89B00
≈ Orange Satisfaction
Triada +120° +240°
- FD7F22
Orange You Happy?
- 00C49A
≈ Blarney
- A894FF
≈ Cobalite
Komplementarna rozszczepiona +150° +210°
- FD7F22
Orange You Happy?
- 00BEC6
≈ Panorama Blue
- 73A7FF
≈ Fennel Flower
Tetrada +90° +180° +270°
- FD7F22
Orange You Happy?
- 60C24D
≈ Range Land
- 00B6F1
≈ Zima Blue
- D87DEC
≈ Calypso Orchid
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.54:1 · APCA Lc 49
Ag
AAANa czerni
WCAG 8.23:1 · APCA Lc 53
Najlepszy kolor tekstu: #000000
WCAG 8.23:1 (AAA) · APCA Lc 53
Contrast pairs
Fragmenty kodu
CSS
:root {
--orange-you-happy: #fd7f22;
--orange-you-happy-rgb: 253 127 34;
--orange-you-happy-oklch: oklch(0.729 0.18 50.5);
}
.element {
color: var(--orange-you-happy);
background-color: hsl(25 98% 56%);
border-color: oklch(0.729 0.18 50.5);
}Tailwind CSS v4
@theme {
--color-orange-you-happy: #fd7f22;
--color-orange-you-happy-50: #ffe8c6;
--color-orange-you-happy-100: #ffd8b0;
--color-orange-you-happy-200: #ffbe8b;
--color-orange-you-happy-300: #fe9b59;
--color-orange-you-happy-400: #ef7923;
--color-orange-you-happy-500: #de5500;
--color-orange-you-happy-600: #bb4900;
--color-orange-you-happy-700: #973a00;
--color-orange-you-happy-800: #712800;
--color-orange-you-happy-900: #501b00;
--color-orange-you-happy-950: #350a00;
}SCSS
$orange-you-happy: #fd7f22;
$orange-you-happy-rgb: 253, 127, 34;
$orange-you-happy-light: mix(#fff, $orange-you-happy, 20%);
$orange-you-happy-dark: mix(#000, $orange-you-happy, 20%);
.element {
color: $orange-you-happy;
box-shadow: 0 0 0 2px rgba($orange-you-happy, 0.35);
}