Violet (CSS) Analogous Color Scheme
Five colors arranged by the analogous rule around Violet (CSS) (#EE82EE), each snapped to its nearest named color.
#8B88F8
#BF8FE5
#EE82EE
#F485AC
#F08080
Color names and codes
| Name | HEX | RGB | HSL | CMYK | OKLCH | |
|---|---|---|---|---|---|---|
| Lavender Blue Shadow | #8B88F8 | 139, 136, 248 | 242°, 89%, 75% | 44, 45, 0, 3 | 68.0% 0.162 282 | |
| Luminous Lavender | #BF8FE5 | 191, 143, 229 | 273°, 62%, 73% | 17, 38, 0, 10 | 72.8% 0.131 309 | |
| Violet (CSS) | #EE82EE | 238, 130, 238 | 300°, 76%, 72% | 0, 45, 0, 7 | 76.2% 0.186 327 | |
| Brown Knapweed | #F485AC | 244, 133, 172 | 339°, 83%, 74% | 0, 45, 30, 4 | 74.9% 0.141 359 | |
| Meat | #F08080 | 240, 128, 128 | 0°, 79%, 72% | 0, 47, 47, 6 | 72.5% 0.138 21 |
Which pairs work for text
| Text on background | Contrast | WCAG |
|---|---|---|
| Aa #8B88F8 on #EE82EE | 1.30:1 | — |
| Aa #8B88F8 on #F485AC | 1.26:1 | — |
| Aa #8B88F8 on #BF8FE5 | 1.19:1 | — |
| Aa #8B88F8 on #F08080 | 1.16:1 | — |
| Aa #EE82EE on #F08080 | 1.12:1 | — |
| Aa #BF8FE5 on #EE82EE | 1.10:1 | — |
CSS variables
:root {
--color-1: #8b88f8; /* Lavender Blue Shadow */
--color-2: #bf8fe5; /* Luminous Lavender */
--color-3: #ee82ee; /* Violet (CSS) */
--color-4: #f485ac; /* Brown Knapweed */
--color-5: #f08080; /* Meat */
}Other schemes from Violet (CSS)
- Violet (CSS) Complementary Color Scheme#EE82EE#FED0FC#90EE90#2CE335#DDFFDD
- Violet (CSS) Triadic Color Scheme#EE82EE#EEEE88#88EEEE#FFDBF7#EBE734
- Violet (CSS) Split-complementary Color Scheme#EE82EE#BBEE88#80F9AD#FF33EE#DDF3C2
- Violet (CSS) Tetradic Color Scheme#EE82EE#EAB781#90EE90#88BBEE#FFDBF7
- Violet (CSS) Monochromatic Color Scheme#AC1DB8#FF33EE#EE82EE#FCCCF5#FCEBFA
More light pink analogous color schemes
- Always Rosey Analogous Color Scheme#D19FE8#EB94DA#E79DB3#E8AA9D#E2D39B
- Atomic Pink Analogous Color Scheme#7A81FF#BF77F6#FB7EFD#F77FBE#FF7A83
- Avant-Garde Pink Analogous Color Scheme#8273FD#CC77FF#FF77EE#FF77AA#FF8877
- Barbiecore Analogous Color Scheme#7755EE#A552E6#E15ACB#E35B8F#E2725B
- Blush d’Amour Analogous Color Scheme#BA55D3#DD55CC#DE5D83#DF745B#DFBA5A
- Blushing Sky Analogous Color Scheme#B6AED6#CAADD8#D9B1D6#D6B3C0#D8B6B0
- Bubblegum Analogous Color Scheme#8080FF#CA84FC#FF85FF#FD82C3#FF8888
- Bubblegum Beam Analogous Color Scheme#BB88FF#EB84F5#F887C7#FF878D#F6B98A
- Bubblegum Kisses Analogous Color Scheme#B195E4#D891EF#F092D6#F091A9#EFAB93
- Candy Floss Analogous Color Scheme#ACACE6#DDAAEE#E8A7E2#E5A5C1#E7AFA8
- Candy Pink Analogous Color Scheme#6666FF#C760FF#FF63E9#FF629F#FA7B62
- Classy Mauve Analogous Color Scheme#AF92BD#BB99BB#BB99AA#BD9095#BEA998
Questions
What colors go with Violet (CSS)?
In a analogous scheme: Lavender Blue Shadow (#8B88F8), Luminous Lavender (#BF8FE5), Brown Knapweed (#F485AC), Meat (#F08080).
What is the hex code of Violet (CSS)?
#EE82EE.