Created at 12/27/2017 20:28
1
Cyan palette Materialize CSS
- cyan lighten-5#e0f7fa
- cyan lighten-4#b2ebf2
- cyan lighten-3#80deea
- cyan lighten-2#4dd0e1
- cyan lighten-1#26c6da
- cyan#00bcd4
- cyan darken-1#00acc1
- cyan darken-2#0097a7
- cyan darken-3#00838f
- cyan darken-4#006064
- cyan accent-1#84ffff
- cyan accent-2#18ffff
- cyan accent-3#00e5ff
- cyan accent-4#00b8d4
The palette consists of Light colors. Accent colors cyan accent-1 #84ffff and cyan accent-2 #18ffff. Palette has Neutral, Cool colors temperature.
By lightness, this palette runs from #006064 (darkest) to #E0F7FA (lightest). The lightness range is wide.
Overall saturation feels vivid (higher chroma).
Hue spacing suggests a mostly analogous cluster (loose heuristic, not a strict color-theory label).
Overall temperature among swatches leans cool.
HEX codes (sorted): #006064, #00838F, #0097A7, #00ACC1, #00B8D4, #00BCD4, #00E5FF, #18FFFF, #26C6DA, #4DD0E1, #80DEEA, #84FFFF, #B2EBF2, #E0F7FA
Palette Cyan palette Materialize CSS has combination of 14 codes colors:
HEX: #e0f7fa, RGB: (224, 247, 250); HEX: #b2ebf2, RGB: (178, 235, 242); HEX: #80deea, RGB: (128, 222, 234)
HEX: #4dd0e1, RGB: (77, 208, 225); HEX: #26c6da, RGB: (38, 198, 218); HEX: #00bcd4, RGB: (0, 188, 212)
HEX: #00acc1, RGB: (0, 172, 193); HEX: #0097a7, RGB: (0, 151, 167); HEX: #00838f, RGB: (0, 131, 143)
HEX: #006064, RGB: (0, 96, 100); HEX: #84ffff, RGB: (132, 255, 255); HEX: #18ffff, RGB: (24, 255, 255)
HEX: #00e5ff, RGB: (0, 229, 255); HEX: #00b8d4, RGB: (0, 184, 212)
Simplified version of palette colors
Tint of azure, Shade of powderblue, Tint of powderblue, Shade of darkturquoise, Shade of darkturquoise, Tint of darkturquoise, Tint of cadetblue, Tint of cadetblue, Shade of Teal, Tint of darkslategrey, Shade of cyan, Shade of cyan, Shade of darkturquoise, Tint of darkturquoise
Color scheme was created by mz
Colors codes in palette
Cyan palette Materialize CSS color codes HEX, RGB information in table
| Color | HEX | RGB | Name | Alternative name |
| #e0f7fa | #e0f7fa | RGB(224, 247, 250) | cyan lighten-5 | — |
| #b2ebf2 | #b2ebf2 | RGB(178, 235, 242) | cyan lighten-4 | — |
| #80deea | #80deea | RGB(128, 222, 234) | cyan lighten-3 | — |
| #4dd0e1 | #4dd0e1 | RGB(77, 208, 225) | cyan lighten-2 | — |
| #26c6da | #26c6da | RGB(38, 198, 218) | cyan lighten-1 | — |
| #00bcd4 | #00bcd4 | RGB(0, 188, 212) | cyan | — |
| #00acc1 | #00acc1 | RGB(0, 172, 193) | cyan darken-1 | — |
| #0097a7 | #0097a7 | RGB(0, 151, 167) | cyan darken-2 | — |
| #00838f | #00838f | RGB(0, 131, 143) | cyan darken-3 | — |
| #006064 | #006064 | RGB(0, 96, 100) | cyan darken-4 | — |
| #84ffff | #84ffff | RGB(132, 255, 255) | cyan accent-1 | — |
| #18ffff | #18ffff | RGB(24, 255, 255) | cyan accent-2 | — |
| #00e5ff | #00e5ff | RGB(0, 229, 255) | cyan accent-3 | — |
| #00b8d4 | #00b8d4 | RGB(0, 184, 212) | cyan accent-4 | — |
Color Palette Contrast
58 color pairs have low contrast and need improvement which may impact readability.
| Text Color | Background Color | Contrast Ratio |
#e0f7fa | #b2ebf2 | 1.17 |
#e0f7fa | #80deea | 1.39 |
#e0f7fa | #4dd0e1 | 1.65 |
#e0f7fa | #26c6da | 1.85 |
#e0f7fa | #84ffff | 1.06 |
#e0f7fa | #18ffff | 1.12 |
Image palette Cyan palette Materialize CSS png
Export Palette
Download the "Cyan palette Materialize CSS" in multiple formats for seamless integration into your design projects.
Available formats: