色名 · #CD9C2B
Citronne
Citronneは#CD9C2B：rgb(205 156 43)、hsl(42 65% 49%)、oklch(0.72 0.135 83.4)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Citronne color name →
#CD9C2B
oklch(0.72 0.135 83.4)
カラー変換
- HEX
- #cd9c2b
- RGB
- rgb(205 156 43)
- HSL
- hsl(42 65% 49%)
- HWB
- hwb(42 17% 20%)
- OKLCH
- oklch(0.72 0.135 83.4)
- OKLab
- oklab(0.72 0.016 0.134)
- CIE Lab
- lab(67.7 11.42 61.75)
- LCH
- lch(67.7 62.8 79.5)
- CMYK
- cmyk(0% 24% 79% 20%)
ティント · シェード · トーン
ティント
- D2A649
- D7B061
- DCBA77
- E2C48B
- E7CE9F
- EBD8B2
- F0E2C6
- F5EBD9
- FAF5EC
シェード
- B28724
- 98731D
- 7E5F16
- 664C10
- 4E390A
- 382805
- 231802
- 0F0901
- 020100
トーン
- C59A3B
- BD9748
- B69452
- AE925A
- A68F62
- 9F8C69
- 97896F
- 8F8675
- 88837B
カラーハーモニー
補色 +180°
- CD9C2B
Citronne
- 78A3F9
≈ Fennel Flower
類似色 -30° +30°
- CD9C2B
Citronne
- E58B4D
≈ Orange Poppy
- A5AD3D
≈ Sphagnales Moss
トライアド +120° +240°
- CD9C2B
Citronne
- 00BBC7
≈ Panorama Blue
- CD86D5
≈ Purception
スプリットコンプリメンタリー +150° +210°
- CD9C2B
Citronne
- 33B2EB
≈ Lynx Screen Blue
- A993F1
≈ Dreamy Candy Forest
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.50:1 · APCA Lc 49
Ag
AAA黒の上
WCAG 8.38:1 · APCA Lc 53
最適な文字色: #000000
WCAG 8.38:1 (AAA) · APCA Lc 53
Contrast pairs
コードスニペット
CSS
:root {
--citronne: #cd9c2b;
--citronne-rgb: 205 156 43;
--citronne-oklch: oklch(0.72 0.135 83.4);
}
.element {
color: var(--citronne);
background-color: hsl(42 65% 49%);
border-color: oklch(0.72 0.135 83.4);
}Tailwind CSS v4
@theme {
--color-citronne: #cd9c2b;
--color-citronne-50: #fff3ca;
--color-citronne-100: #fce5b5;
--color-citronne-200: #eed191;
--color-citronne-300: #d7b262;
--color-citronne-400: #c4962e;
--color-citronne-500: #b07b00;
--color-citronne-600: #956900;
--color-citronne-700: #785400;
--color-citronne-800: #5a3c00;
--color-citronne-900: #3f2900;
--color-citronne-950: #281700;
}SCSS
$citronne: #cd9c2b;
$citronne-rgb: 205, 156, 43;
$citronne-light: mix(#fff, $citronne, 20%);
$citronne-dark: mix(#000, $citronne, 20%);
.element {
color: $citronne;
box-shadow: 0 0 0 2px rgba($citronne, 0.35);
}