Colore con nome · #B4655C
Pineapple Blossom
Pineapple Blossom è #B4655C: rgb(180 101 92), hsl(6 37% 53%), oklch(0.594 0.103 27.4). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Red mean? → · Pineapple Blossom color name →
#B4655C
oklch(0.594 0.103 27.4)
Conversioni di colore
- HEX
- #b4655c
- RGB
- rgb(180 101 92)
- HSL
- hsl(6 37% 53%)
- HWB
- hwb(6 36% 29%)
- OKLCH
- oklch(0.594 0.103 27.4)
- OKLab
- oklab(0.594 0.092 0.048)
- CIE Lab
- lab(51.99 31.8 19.78)
- LCH
- lch(51.99 37.45 31.9)
- CMYK
- cmyk(0% 44% 49% 29%)
Tinte · Ombre · Toni
Tinte
- BD746B
- C5837B
- CD928B
- D5A29B
- DCB1AB
- E4C0BB
- EBD0CC
- F2DFDD
- F9EFEE
Ombre
- 9C574F
- 854942
- 6E3C36
- 582F2A
- 44221F
- 301714
- 1D0C0A
- 0C0303
- 020000
Toni
- AF6860
- AB6B64
- A66E67
- A1716B
- 9C746F
- 977772
- 917976
- 8C7B79
- 867E7D
Armonie di colore
Complementare +180°
- B4655C
Pineapple Blossom
- 008F9E
≈ Coral Coast
Analogo -30° +30°
- B4655C
Pineapple Blossom
- AF637F
≈ Apple II Rose
- AC6E3C
≈ Tanooki Suit Brown
Triadico +120° +240°
- B4655C
Pineapple Blossom
- 518F5A
≈ Middle Green
- 637CBC
≈ Ultramarine Blue
Complementare divisa +150° +210°
- B4655C
Pineapple Blossom
- 1C927E
≈ Miami Jade
- 3887B4
≈ Curious Blue
Tetradico +90° +180° +270°
- B4655C
Pineapple Blossom
- 7A8739
≈ Sacred Sapling
- 008F9E
≈ Coral Coast
- 8671B4
≈ Purple Hebe
Contrasto e accessibilità
Ag
FailSu bianco
WCAG 4.23:1 · APCA Lc 69
Ag
AASu nero
WCAG 4.95:1 · APCA Lc 33
Miglior colore del testo: #000000
WCAG 4.95:1 (AA) · APCA Lc 33
Contrast pairs
Frammenti di codice
CSS
:root {
--pineapple-blossom: #b4655c;
--pineapple-blossom-rgb: 180 101 92;
--pineapple-blossom-oklch: oklch(0.594 0.103 27.4);
}
.element {
color: var(--pineapple-blossom);
background-color: hsl(6 37% 53%);
border-color: oklch(0.594 0.103 27.4);
}Tailwind CSS v4
@theme {
--color-pineapple-blossom: #b4655c;
--color-pineapple-blossom-50: #ffebe4;
--color-pineapple-blossom-100: #ffdcd4;
--color-pineapple-blossom-200: #fec4bb;
--color-pineapple-blossom-300: #e8a499;
--color-pineapple-blossom-400: #d5867d;
--color-pineapple-blossom-500: #c16960;
--color-pineapple-blossom-600: #a35a51;
--color-pineapple-blossom-700: #834741;
--color-pineapple-blossom-800: #613330;
--color-pineapple-blossom-900: #442320;
--color-pineapple-blossom-950: #2c1210;
}SCSS
$pineapple-blossom: #b4655c;
$pineapple-blossom-rgb: 180, 101, 92;
$pineapple-blossom-light: mix(#fff, $pineapple-blossom, 20%);
$pineapple-blossom-dark: mix(#000, $pineapple-blossom, 20%);
.element {
color: $pineapple-blossom;
box-shadow: 0 0 0 2px rgba($pineapple-blossom, 0.35);
}