Nazwany kolor · #F3BD32
Barberry Yellow
Barberry Yellow to #F3BD32: rgb(243 189 50), hsl(43 89% 57%), oklch(0.825 0.156 85.6). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Yellow mean? → · Barberry Yellow color name →
#F3BD32
oklch(0.825 0.156 85.6)
Konwersje koloru
- HEX
- #f3bd32
- RGB
- rgb(243 189 50)
- HSL
- hsl(43 89% 57%)
- HWB
- hwb(43 20% 5%)
- OKLCH
- oklch(0.825 0.156 85.6)
- OKLab
- oklab(0.825 0.012 0.155)
- CIE Lab
- lab(79.96 11.17 71.82)
- LCH
- lch(79.96 72.69 81.2)
- CMYK
- cmyk(0% 22% 79% 5%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F4C452
- F6CB6B
- F7D280
- F8D994
- FADFA7
- FBE6B9
- FCECCB
- FDF3DC
- FEF9EE
Odcienie ciemniejsze
- D3A42A
- B48C22
- 97741B
- 7A5D14
- 5E470D
- 443307
- 2B1F03
- 140D01
- 030200
Tony
- E7B743
- DBB150
- CFAB5A
- C4A562
- B89F69
- AD996F
- A19374
- 968D79
- 8B867C
Harmonie kolorów
Komplementarna +180°
- F3BD32
Barberry Yellow
- ABC5FF
≈ Night Snow
Analogowa -30° +30°
- F3BD32
Barberry Yellow
- FFB27C
≈ Isn’t It Just Peachy
- C2D24D
≈ Clown Green
Triada +120° +240°
- F3BD32
Barberry Yellow
- 00DFF2
≈ Tamarama
- F9A0FC
≈ Pinkalicious
Komplementarna rozszczepiona +150° +210°
- F3BD32
Barberry Yellow
- 81D1FF
≈ Drift on the Sea
- CBB9FF
≈ Lavender Tonic
Tetrada +90° +180° +270°
- F3BD32
Barberry Yellow
- 00E6C1
≈ Aquamarine
- ABC5FF
≈ Night Snow
- FFA8C9
≈ Bazooka Pink
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.73:1 · APCA Lc 31
Ag
AAANa czerni
WCAG 12.13:1 · APCA Lc 72
Najlepszy kolor tekstu: #000000
WCAG 12.13:1 (AAA) · APCA Lc 72
Contrast pairs
Fragmenty kodu
CSS
:root {
--barberry-yellow: #f3bd32;
--barberry-yellow-rgb: 243 189 50;
--barberry-yellow-oklch: oklch(0.825 0.156 85.6);
}
.element {
color: var(--barberry-yellow);
background-color: hsl(43 89% 57%);
border-color: oklch(0.825 0.156 85.6);
}Tailwind CSS v4
@theme {
--color-barberry-yellow: #f3bd32;
--color-barberry-yellow-50: #fff3c3;
--color-barberry-yellow-100: #fee6ac;
--color-barberry-yellow-200: #f0d185;
--color-barberry-yellow-300: #d9b24f;
--color-barberry-yellow-400: #c79600;
--color-barberry-yellow-500: #b47a00;
--color-barberry-yellow-600: #986800;
--color-barberry-yellow-700: #7a5300;
--color-barberry-yellow-800: #5c3c00;
--color-barberry-yellow-900: #402900;
--color-barberry-yellow-950: #291600;
}SCSS
$barberry-yellow: #f3bd32;
$barberry-yellow-rgb: 243, 189, 50;
$barberry-yellow-light: mix(#fff, $barberry-yellow, 20%);
$barberry-yellow-dark: mix(#000, $barberry-yellow, 20%);
.element {
color: $barberry-yellow;
box-shadow: 0 0 0 2px rgba($barberry-yellow, 0.35);
}