# Navy and terracotta sun bleached pool tiles The Navy and terracotta sun bleached pool tiles brings together blue, teal, yellow, and orange. The colors span a moderate lightness range, combining moderate color with gentle contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is blue, and its lightest tone is yellow. - Also called: Complementary blue, gray and brown linear gradient - Seed: `kWXUe3wJ09M8ROfUFLXTiU7Q` - Page: https://grabient.com/kWXUe3wJ09M8ROfUFLXTiU7Q?steps=32 - Drawn as: linear gradient, 32 steps, 90 degrees - Hues: complementary - Contrast of its darkest and lightest colors: 3.4 to 1 ## Colors The name most people give each color, and the text color that reads on it with its contrast. | Stop | Hex | OKLCH | Name | Text on it | | --- | --- | --- | --- | --- | | 1 | `#1a3e71` | `oklch(36.61% 0.0978 258.05)` | Ashenvale Nights | white, 10.6 to 1 | | 2 | `#1b4174` | `oklch(37.77% 0.0965 256.38)` | Assault | white, 10.1 to 1 | | 3 | `#1d4777` | `oklch(39.33% 0.0949 254.38)` | Thunder Night | white, 9.5 to 1 | | 4 | `#204d7b` | `oklch(41.20% 0.0929 252.00)` | Mykonos Reflection | white, 8.7 to 1 | | 5 | `#235380` | `oklch(43.25% 0.0906 249.22)` | Blueberry Twist | white, 7.9 to 1 | | 6 | `#275a84` | `oklch(45.39% 0.0881 246.02)` | Bahama Blue | white, 7.2 to 1 | | 7 | `#2a6188` | `oklch(47.49% 0.0853 242.37)` | Copenhagen Blue | white, 6.6 to 1 | | 8 | `#2e688b` | `oklch(49.46% 0.0823 238.23)` | Drake’s Neck | white, 6 to 1 | | 9 | `#326e8d` | `oklch(51.20% 0.0791 233.59)` | Big Ocean Wave | white, 5.6 to 1 | | 10 | `#37748e` | `oklch(52.87% 0.0750 228.56)` | Bengal Blue | white, 5.2 to 1 | | 11 | `#3d798e` | `oklch(54.53% 0.0702 223.12)` | Blue Catch | white, 4.8 to 1 | | 12 | `#457e8e` | `oklch(56.15% 0.0649 217.25)` | Casual Blue | black, 4.6 to 1 | | 13 | `#4d838d` | `oklch(57.71% 0.0597 210.89)` | Cape Lee | black, 4.9 to 1 | | 14 | `#55888d` | `oklch(59.17% 0.0549 203.99)` | Dusty Turquoise | black, 5.2 to 1 | | 15 | `#5d8b8c` | `oklch(60.51% 0.0508 196.50)` | Steel Teal | black, 5.5 to 1 | | 16 | `#648f8b` | `oklch(61.68% 0.0478 188.38)` | Oil Blue | black, 5.8 to 1 | | 17 | `#6a9289` | `oklch(62.69% 0.0462 179.45)` | Nephrite | black, 6 to 1 | | 18 | `#709486` | `oklch(63.57% 0.0455 169.00)` | Up North | black, 6.2 to 1 | | 19 | `#779682` | `oklch(64.33% 0.0455 157.40)` | Mid Cypress | black, 6.4 to 1 | | 20 | `#7e977e` | `oklch(64.98% 0.0463 145.19)` | Dinosaur | black, 6.6 to 1 | | 21 | `#859779` | `oklch(65.48% 0.0477 132.87)` | Laurel Tree | black, 6.7 to 1 | | 22 | `#8d9775` | `oklch(65.86% 0.0498 120.97)` | Artichoke | black, 6.8 to 1 | | 23 | `#949670` | `oklch(66.08% 0.0524 110.03)` | Silk Road | black, 6.8 to 1 | | 24 | `#9a946c` | `oklch(66.15% 0.0556 100.55)` | Sweet Annie | black, 6.8 to 1 | | 25 | `#9f9268` | `oklch(66.01% 0.0597 92.69)` | Chapter | black, 6.7 to 1 | | 26 | `#a38e62` | `oklch(65.57% 0.0652 85.73)` | Rattan | black, 6.6 to 1 | | 27 | `#a68a5c` | `oklch(64.91% 0.0718 79.58)` | Fall Harvest | black, 6.4 to 1 | | 28 | `#a98555` | `oklch(64.13% 0.0789 74.20)` | Chicory | black, 6.2 to 1 | | 29 | `#ac814e` | `oklch(63.30% 0.0860 69.54)` | Mediaeval Gold | black, 5.9 to 1 | | 30 | `#ae7c48` | `oklch(62.51% 0.0926 65.54)` | Tan Brown | black, 5.7 to 1 | | 31 | `#b07844` | `oklch(61.86% 0.0981 62.17)` | Gold Metal | black, 5.5 to 1 | | 32 | `#b17541` | `oklch(61.42% 0.1020 59.38)` | Gold Metal | black, 5.4 to 1 | ## CSS ```css background: linear-gradient(90deg, #1a3e71 0.0%, #1b4174 3.2%, #1d4777 6.5%, #204d7b 9.7%, #235380 12.9%, #275a84 16.1%, #2a6188 19.4%, #2e688b 22.6%, #326e8d 25.8%, #37748e 29.0%, #3d798e 32.3%, #457e8e 35.5%, #4d838d 38.7%, #55888d 41.9%, #5d8b8c 45.2%, #648f8b 48.4%, #6a9289 51.6%, #709486 54.8%, #779682 58.1%, #7e977e 61.3%, #859779 64.5%, #8d9775 67.7%, #949670 71.0%, #9a946c 74.2%, #9f9268 77.4%, #a38e62 80.6%, #a68a5c 83.9%, #a98555 87.1%, #ac814e 90.3%, #ae7c48 93.5%, #b07844 96.8%, #b17541 100.0%); background: linear-gradient(90deg in oklch, oklch(36.61% 0.0978 258.05) 0.0%, oklch(37.77% 0.0965 256.38) 3.2%, oklch(39.33% 0.0949 254.38) 6.5%, oklch(41.20% 0.0929 252.00) 9.7%, oklch(43.25% 0.0906 249.22) 12.9%, oklch(45.39% 0.0881 246.02) 16.1%, oklch(47.49% 0.0853 242.37) 19.4%, oklch(49.46% 0.0823 238.23) 22.6%, oklch(51.20% 0.0791 233.59) 25.8%, oklch(52.87% 0.0750 228.56) 29.0%, oklch(54.53% 0.0702 223.12) 32.3%, oklch(56.15% 0.0649 217.25) 35.5%, oklch(57.71% 0.0597 210.89) 38.7%, oklch(59.17% 0.0549 203.99) 41.9%, oklch(60.51% 0.0508 196.50) 45.2%, oklch(61.68% 0.0478 188.38) 48.4%, oklch(62.69% 0.0462 179.45) 51.6%, oklch(63.57% 0.0455 169.00) 54.8%, oklch(64.33% 0.0455 157.40) 58.1%, oklch(64.98% 0.0463 145.19) 61.3%, oklch(65.48% 0.0477 132.87) 64.5%, oklch(65.86% 0.0498 120.97) 67.7%, oklch(66.08% 0.0524 110.03) 71.0%, oklch(66.15% 0.0556 100.55) 74.2%, oklch(66.01% 0.0597 92.69) 77.4%, oklch(65.57% 0.0652 85.73) 80.6%, oklch(64.91% 0.0718 79.58) 83.9%, oklch(64.13% 0.0789 74.20) 87.1%, oklch(63.30% 0.0860 69.54) 90.3%, oklch(62.51% 0.0926 65.54) 93.5%, oklch(61.86% 0.0981 62.17) 96.8%, oklch(61.42% 0.1020 59.38) 100.0%); ``` ## Keyframes 5 OKLCH keyframes joined by a Catmull-Rom spline. Hue is unwrapped degrees. | Keyframe | Lightness | Chroma | Hue | | --- | --- | --- | --- | | 1 | 0.366 | 0.098 | 258 | | 2 | 0.508 | 0.08 | 234.8 | | 3 | 0.622 | 0.047 | 184.1 | | 4 | 0.661 | 0.056 | 98.5 | | 5 | 0.614 | 0.102 | 59.4 | ## In these collections - [Sun bleached pool tiles](https://grabient.com/sun-bleached-pool-tiles) - [Navy](https://grabient.com/navy) ## Other forms - [JSON](https://grabient.com/kWXUe3wJ09M8ROfUFLXTiU7Q.json?steps=32) - [PNG](https://grabient.com/kWXUe3wJ09M8ROfUFLXTiU7Q.png?steps=32) - [SVG](https://grabient.com/kWXUe3wJ09M8ROfUFLXTiU7Q.svg?steps=32) - [CSS](https://grabient.com/kWXUe3wJ09M8ROfUFLXTiU7Q.css?steps=32) - [ASE](https://grabient.com/kWXUe3wJ09M8ROfUFLXTiU7Q.ase?steps=32) - [GPL](https://grabient.com/kWXUe3wJ09M8ROfUFLXTiU7Q.gpl?steps=32) - [GRD](https://grabient.com/kWXUe3wJ09M8ROfUFLXTiU7Q.grd?steps=32) - [Design tokens](https://grabient.com/kWXUe3wJ09M8ROfUFLXTiU7Q.tokens.json?steps=32) - [Social card](https://grabient.com/api/og?seed=kWXUe3wJ09M8ROfUFLXTiU7Q&steps=32) - [Palettes like this one](https://grabient.com/palettes?q=kWXUe3wJ09M8ROfUFLXTiU7Q) - [Guide for agents](https://grabient.com/llms.txt)