Nazwany kolor · #F8822A
Summer Citrus
Summer Citrus to #F8822A: rgb(248 130 42), hsl(26 94% 57%), oklch(0.727 0.171 51.8). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Summer Citrus color name →
#F8822A
oklch(0.727 0.171 51.8)
Konwersje koloru
- HEX
- #f8822a
- RGB
- rgb(248 130 42)
- HSL
- hsl(26 94% 57%)
- HWB
- hwb(26 16% 3%)
- OKLCH
- oklch(0.727 0.171 51.8)
- OKLab
- oklab(0.727 0.106 0.135)
- CIE Lab
- lab(67.3 42.27 64.4)
- LCH
- lch(67.3 77.03 56.7)
- CMYK
- cmyk(0% 48% 83% 3%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- FA9049
- FC9D61
- FEAA76
- FFB68B
- FFC39E
- FFCFB2
- FFDBC5
- FFE7D9
- FFF3EC
Odcienie ciemniejsze
- D87023
- B85F1C
- 9A4E16
- 7C3E10
- 602F0A
- 452005
- 2C1202
- 150601
- 030100
Tony
- EC833B
- E18447
- D58451
- C9845A
- BD8462
- B28469
- A6836F
- 998275
- 8D817B
Harmonie kolorów
Komplementarna +180°
- F8822A
Summer Citrus
- 00B5F3
≈ Zima Blue
Analogowa -30° +30°
- F8822A
Summer Citrus
- FF7576
≈ Embarrassment
- D59B00
≈ Leopard
Triada +120° +240°
- F8822A
Summer Citrus
- 00C39C
≈ Jadeite
- A992FF
≈ Cobalite
Komplementarna rozszczepiona +150° +210°
- F8822A
Summer Citrus
- 00BDC7
≈ Panorama Blue
- 74A5FF
≈ Fennel Flower
Tetrada +90° +180° +270°
- F8822A
Summer Citrus
- 60C156
≈ Range Land
- 00B5F3
≈ Zima Blue
- D77EE6
≈ Hibiscus Pop
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.55:1 · APCA Lc 49
Ag
AAANa czerni
WCAG 8.21:1 · APCA Lc 52
Najlepszy kolor tekstu: #000000
WCAG 8.21:1 (AAA) · APCA Lc 52
Contrast pairs
Fragmenty kodu
CSS
:root {
--summer-citrus: #f8822a;
--summer-citrus-rgb: 248 130 42;
--summer-citrus-oklch: oklch(0.727 0.171 51.8);
}
.element {
color: var(--summer-citrus);
background-color: hsl(26 94% 57%);
border-color: oklch(0.727 0.171 51.8);
}Tailwind CSS v4
@theme {
--color-summer-citrus: #f8822a;
--color-summer-citrus-50: #ffe9c8;
--color-summer-citrus-100: #ffd9b2;
--color-summer-citrus-200: #ffc08d;
--color-summer-citrus-300: #fb9d5d;
--color-summer-citrus-400: #eb7c2b;
--color-summer-citrus-500: #d95a00;
--color-summer-citrus-600: #b84d00;
--color-summer-citrus-700: #943e00;
--color-summer-citrus-800: #6f2b00;
--color-summer-citrus-900: #4e1d00;
--color-summer-citrus-950: #330c00;
}SCSS
$summer-citrus: #f8822a;
$summer-citrus-rgb: 248, 130, 42;
$summer-citrus-light: mix(#fff, $summer-citrus, 20%);
$summer-citrus-dark: mix(#000, $summer-citrus, 20%);
.element {
color: $summer-citrus;
box-shadow: 0 0 0 2px rgba($summer-citrus, 0.35);
}