Benoemde kleur · #503000
Kyoto House
Kyoto House is #503000: rgb(80 48 0), hsl(36 100% 16%), oklch(0.341 0.074 69.9). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Brown mean? → · Kyoto House color name →
#503000
oklch(0.341 0.074 69.9)
Kleurconversies
- HEX
- #503000
- RGB
- rgb(80 48 0)
- HSL
- hsl(36 100% 16%)
- HWB
- hwb(36 0% 69%)
- OKLCH
- oklch(0.341 0.074 69.9)
- OKLab
- oklab(0.341 0.025 0.069)
- CIE Lab
- lab(23.35 12.2 32.74)
- LCH
- lch(23.35 34.93 69.6)
- CMYK
- cmyk(0% 40% 100% 69%)
Tinten · Schaduwen · Tonen
Tinten
- 60431E
- 715636
- 82694D
- 937D65
- A5927D
- B6A796
- C8BCAF
- DAD2C9
- ECE8E4
Schaduwen
- 442800
- 392100
- 2E1A00
- 241300
- 1A0C00
- 100600
- 070300
- 020100
- 000000
Tonen
- 553812
- 5A4020
- 5F482D
- 645039
- 695844
- 6D6050
- 72685C
- 777068
- 7B7874
Kleurharmonieën
Complementair +180°
- 503000
Kyoto House
- 153A5D
≈ Poseidon
Analoog -30° +30°
- 503000
Kyoto House
- 572918
≈ Fudge Brownie
- 413800
≈ Camouflage
Triadisch +120° +240°
- 503000
Kyoto House
- 00423F
≈ Warm Black
- 442C55
≈ Scarlet Gum
Gesplitst complementair +150° +210°
- 503000
Kyoto House
- 003F4E
≈ Cold and Dark
- 31335D
≈ Quill Tip
Tetradisch +90° +180° +270°
- 503000
Kyoto House
- 05432A
≈ Lost in the Woods
- 153A5D
≈ Poseidon
- 512744
≈ Murasaki
Contrast en toegankelijkheid
Ag
AAAOp wit
WCAG 11.90:1 · APCA Lc 97
Ag
FailOp zwart
WCAG 1.76:1 · APCA Lc 0
Beste tekstkleur: #FFFFFF
WCAG 11.90:1 (AAA) · APCA Lc 97
Contrast pairs
Codefragmenten
CSS
:root {
--kyoto-house: #503000;
--kyoto-house-rgb: 80 48 0;
--kyoto-house-oklch: oklch(0.341 0.074 69.9);
}
.element {
color: var(--kyoto-house);
background-color: hsl(36 100% 16%);
border-color: oklch(0.341 0.074 69.9);
}Tailwind CSS v4
@theme {
--color-kyoto-house: #503000;
--color-kyoto-house-50: #fff2df;
--color-kyoto-house-100: #f8e4ce;
--color-kyoto-house-200: #e9d0b2;
--color-kyoto-house-300: #cfb28e;
--color-kyoto-house-400: #bb976e;
--color-kyoto-house-500: #a67d4e;
--color-kyoto-house-600: #8c6a43;
--color-kyoto-house-700: #705535;
--color-kyoto-house-800: #533d26;
--color-kyoto-house-900: #3a2a19;
--color-kyoto-house-950: #24180a;
}SCSS
$kyoto-house: #503000;
$kyoto-house-rgb: 80, 48, 0;
$kyoto-house-light: mix(#fff, $kyoto-house, 20%);
$kyoto-house-dark: mix(#000, $kyoto-house, 20%);
.element {
color: $kyoto-house;
box-shadow: 0 0 0 2px rgba($kyoto-house, 0.35);
}