Nazwany kolor · #FEC382
Apricot Appeal
Apricot Appeal to #FEC382: rgb(254 195 130), hsl(31 98% 75%), oklch(0.856 0.106 68.3). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Apricot Appeal color name →
#FEC382
oklch(0.856 0.106 68.3)
Konwersje koloru
- HEX
- #fec382
- RGB
- rgb(254 195 130)
- HSL
- hsl(31 98% 75%)
- HWB
- hwb(31 51% 0%)
- OKLCH
- oklch(0.856 0.106 68.3)
- OKLab
- oklab(0.856 0.039 0.099)
- CIE Lab
- lab(83.19 16.24 41.1)
- LCH
- lch(83.19 44.19 68.4)
- CMYK
- cmyk(0% 23% 49% 0%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- FEC98F
- FFCF9C
- FFD5A9
- FFDCB6
- FFE2C2
- FFE7CE
- FFEDDB
- FFF3E7
- FFF9F3
Odcienie ciemniejsze
- DDA970
- BD905F
- 9E784E
- 80603E
- 634A2F
- 473420
- 2D2012
- 160E06
- 030201
Tony
- F1BC83
- E4B683
- D7AF84
- CAA884
- BEA284
- B19B83
- A59483
- 988D82
- 8C8781
Harmonie kolorów
Komplementarna +180°
- FEC382
Apricot Appeal
- AAD5FF
≈ Malmö FF
Analogowa -30° +30°
- FEC382
Apricot Appeal
- FFBEAA
≈ Porcellana
- E2D17D
≈ Starfruit
Triada +120° +240°
- FEC382
Apricot Appeal
- 73E6DD
≈ Turquoise Chalk
- E1C0FF
≈ Jane Purple
Komplementarna rozszczepiona +150° +210°
- FEC382
Apricot Appeal
- 77E1FE
≈ Tranquil Pool
- C5CCFF
≈ Lavender Blue
Tetrada +90° +180° +270°
- FEC382
Apricot Appeal
- 91E5B6
≈ Teal Deer
- AAD5FF
≈ Malmö FF
- FEB5E8
≈ Hot Aquarelle Pink
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.57:1 · APCA Lc 26
Ag
AAANa czerni
WCAG 13.34:1 · APCA Lc 77
Najlepszy kolor tekstu: #000000
WCAG 13.34:1 (AAA) · APCA Lc 77
Contrast pairs
Fragmenty kodu
CSS
:root {
--apricot-appeal: #fec382;
--apricot-appeal-rgb: 254 195 130;
--apricot-appeal-oklch: oklch(0.856 0.106 68.3);
}
.element {
color: var(--apricot-appeal);
background-color: hsl(31 98% 75%);
border-color: oklch(0.856 0.106 68.3);
}Tailwind CSS v4
@theme {
--color-apricot-appeal: #fec382;
--color-apricot-appeal-50: #fff1d5;
--color-apricot-appeal-100: #ffe3c2;
--color-apricot-appeal-200: #f2cda3;
--color-apricot-appeal-300: #dbae7b;
--color-apricot-appeal-400: #c89256;
--color-apricot-appeal-500: #b4772b;
--color-apricot-appeal-600: #986527;
--color-apricot-appeal-700: #7a511f;
--color-apricot-appeal-800: #5b3a15;
--color-apricot-appeal-900: #40280d;
--color-apricot-appeal-950: #281602;
}SCSS
$apricot-appeal: #fec382;
$apricot-appeal-rgb: 254, 195, 130;
$apricot-appeal-light: mix(#fff, $apricot-appeal, 20%);
$apricot-appeal-dark: mix(#000, $apricot-appeal, 20%);
.element {
color: $apricot-appeal;
box-shadow: 0 0 0 2px rgba($apricot-appeal, 0.35);
}