色名 · #BB4F35
Burnt Ochre
Burnt Ochreは#BB4F35：rgb(187 79 53)、hsl(12 56% 47%)、oklch(0.563 0.146 34.8)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Burnt Ochre color name →
#BB4F35
oklch(0.563 0.146 34.8)
カラー変換
- HEX
- #bb4f35
- RGB
- rgb(187 79 53)
- HSL
- hsl(12 56% 47%)
- HWB
- hwb(12 21% 27%)
- OKLCH
- oklch(0.563 0.146 34.8)
- OKLab
- oklab(0.563 0.12 0.083)
- CIE Lab
- lab(48.11 43.31 37.64)
- LCH
- lch(48.11 57.38 41)
- CMYK
- cmyk(0% 58% 72% 27%)
ティント · シェード · トーン
ティント
- C4624A
- CC745E
- D48571
- DB9685
- E2A899
- E9B9AD
- EFCAC1
- F5DCD5
- FAEDEA
シェード
- A2442D
- 8A3825
- 732E1D
- 5C2315
- 46190E
- 321008
- 1F0703
- 0D0201
- 020000
トーン
- B6563E
- B15C47
- AC614F
- A76656
- A16B5D
- 9B7065
- 95746C
- 8E7873
- 877C79
カラーハーモニー
補色 +180°
- BB4F35
Burnt Ochre
- 00849A
≈ Cruising
類似色 -30° +30°
- BB4F35
Burnt Ochre
- B84A6A
≈ Pink Dahlia
- A76300
≈ Butter Fudge
トライアド +120° +240°
- BB4F35
Burnt Ochre
- 008C4F
≈ Iceland Green
- 5E6BCA
≈ Borage Blue
スプリットコンプリメンタリー +150° +210°
- BB4F35
Burnt Ochre
- 00887D
≈ Mystic Turquoise
- 007BC2
≈ Star of Life
テトラード +90° +180° +270°
- BB4F35
Burnt Ochre
- 638300
≈ Enchanted Forest
- 00849A
≈ Cruising
- 895CB9
≈ Lusty Lavender
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 4.90:1 · APCA Lc 73
Ag
Fail黒の上
WCAG 4.28:1 · APCA Lc 28
最適な文字色: #FFFFFF
WCAG 4.90:1 (AA) · APCA Lc 73
Contrast pairs
コードスニペット
CSS
:root {
--burnt-ochre: #bb4f35;
--burnt-ochre-rgb: 187 79 53;
--burnt-ochre-oklch: oklch(0.563 0.146 34.8);
}
.element {
color: var(--burnt-ochre);
background-color: hsl(12 56% 47%);
border-color: oklch(0.563 0.146 34.8);
}Tailwind CSS v4
@theme {
--color-burnt-ochre: #bb4f35;
--color-burnt-ochre-50: #ffe8d8;
--color-burnt-ochre-100: #ffd8c6;
--color-burnt-ochre-200: #ffbfa8;
--color-burnt-ochre-300: #f89c82;
--color-burnt-ochre-400: #e77c62;
--color-burnt-ochre-500: #d55b3e;
--color-burnt-ochre-600: #b34e35;
--color-burnt-ochre-700: #903e2a;
--color-burnt-ochre-800: #6c2c1f;
--color-burnt-ochre-900: #4c1e14;
--color-burnt-ochre-950: #320d06;
}SCSS
$burnt-ochre: #bb4f35;
$burnt-ochre-rgb: 187, 79, 53;
$burnt-ochre-light: mix(#fff, $burnt-ochre, 20%);
$burnt-ochre-dark: mix(#000, $burnt-ochre, 20%);
.element {
color: $burnt-ochre;
box-shadow: 0 0 0 2px rgba($burnt-ochre, 0.35);
}