Violet (CSS) Complementary Color Scheme
Five colors arranged by the complementary rule around Violet (CSS) (#EE82EE), each snapped to its nearest named color.
#EE82EE
#FED0FC
#90EE90
#2CE335
#DDFFDD
Color names and codes
| Name | HEX | RGB | HSL | CMYK | OKLCH | |
|---|---|---|---|---|---|---|
| Violet (CSS) | #EE82EE | 238, 130, 238 | 300°, 76%, 72% | 0, 45, 0, 7 | 76.2% 0.186 327 | |
| Pink Diamond | #FED0FC | 254, 208, 252 | 303°, 96%, 91% | 0, 18, 1, 0 | 91.0% 0.077 328 | |
| Ulva Lactuca Green | #90EE90 | 144, 238, 144 | 120°, 73%, 75% | 39, 0, 39, 7 | 86.8% 0.156 144 | |
| Alarming Slime | #2CE335 | 44, 227, 53 | 123°, 77%, 53% | 81, 0, 77, 11 | 79.9% 0.251 143 | |
| Transparent Green | #DDFFDD | 221, 255, 221 | 120°, 100%, 93% | 13, 0, 13, 0 | 96.7% 0.057 145 |
Which pairs work for text
| Text on background | Contrast | WCAG |
|---|---|---|
| Aa #EE82EE on #DDFFDD | 2.14:1 | — |
| Aa #EE82EE on #FED0FC | 1.73:1 | — |
| Aa #EE82EE on #90EE90 | 1.64:1 | — |
| Aa #2CE335 on #DDFFDD | 1.60:1 | — |
| Aa #EE82EE on #2CE335 | 1.34:1 | — |
| Aa #90EE90 on #DDFFDD | 1.31:1 | — |
CSS variables
:root {
--color-1: #ee82ee; /* Violet (CSS) */
--color-2: #fed0fc; /* Pink Diamond */
--color-3: #90ee90; /* Ulva Lactuca Green */
--color-4: #2ce335; /* Alarming Slime */
--color-5: #ddffdd; /* Transparent Green */
}Other schemes from Violet (CSS)
- Violet (CSS) Analogous Color Scheme#8B88F8#BF8FE5#EE82EE#F485AC#F08080
- 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 complementary color schemes
- Always Rosey Complementary Color Scheme#E79DB3#FBE5EA#9CE5D6#68DFBB#E9F9F5
- Atomic Pink Complementary Color Scheme#FB7EFD#FFDDFF#8CFD7E#26FF2A#E1F8E7
- Avant-Garde Pink Complementary Color Scheme#FF77EE#FED0FC#7BE892#2DFE54#DFFAE1
- Barbiecore Complementary Color Scheme#E15ACB#F2ABE1#4CFF7B#31D652#B8F8B8
- Blush d’Amour Complementary Color Scheme#DE5D83#EFA7BF#5FD1BA#33CC99#B6ECDE
- Blushing Sky Complementary Color Scheme#D9B1D6#F8EEF4#B1D4B7#7EC083#EBF8EF
- Bubblegum Complementary Color Scheme#FF85FF#FFE0F5#94FF94#26FF2A#E7FBEC
- Bubblegum Beam Complementary Color Scheme#F887C7#FFDDEE#80F9AD#2AF589#E6FDF1
- Bubblegum Kisses Complementary Color Scheme#F092D6#FFE3F4#99EEAA#4CFF7B#EBFCEC
- Candy Floss Complementary Color Scheme#E8A7E2#FCEBFA#AAEEAA#77DD77#EBFCEC
- Candy Pink Complementary Color Scheme#FF63E9#FFBBEE#73FA79#16F12D#CCFFCC
- Classy Mauve Complementary Color Scheme#BB99AA#E4CFD7#8EBBAC#64A281#D3E7DC
Questions
What colors go with Violet (CSS)?
In a complementary scheme: Pink Diamond (#FED0FC), Ulva Lactuca Green (#90EE90), Alarming Slime (#2CE335), Transparent Green (#DDFFDD).
What is the hex code of Violet (CSS)?
#EE82EE.