top of page arrow
Coolors Palette Gradients

I am more than a little envious of watercolor artists' ability to create gradient swatches by blending two or more colors. They can create texture by blending transparent pigments, opaque colors, and granulating paints with water to create color flows that are impossible to achieve digitally.

The closest we can come to that with CSS is to blend several colors into a seamless gradient, and add some background noise for texture. With the help of the color palette generator at Coolors.io, we can create some impressive gradients, even if they do not have the luxurious look of a true watercolor flow, even when we add the artificial texture.

On this page, we have created gradient swatches based on the palettes found in the Coolors Palette project from The Code Room. Hover over the titles to view the code used for each linear gradient.

The Code Room linear-gradient: (to right, #9ea8ad, #75988a,#29746d, #254f4c, #00252d, #0e3245, #1d4262, #60809a, #9993b2, #ceadc2)
Golden State linear-gradient: (to right, #c8c5a1, #c5be91, #c3b884, #bba14f, #a48b48, #917a42, #826c3d, #6f5133, #47342b)
Oxford Blues linear-gradient: (to right, #ffbab3, #f3ebe9, #abc08f, #1e2c1f, #28000f, #111e31)
Blue Skies linear-gradient: (to right, #03045e, #023e8a, #0077b6, #0096c7, #00b4d8, #48cae4, #90e0ef, #ade8f4, #caf0f8)
Pastels linear-gradient: (to right, #fbf8cc, #fde4cf, #ffcfd2, #f1c0e8, #cfbaf0, #a3c4f3, #90dbf4, #8eecf5, #98f5e1, #b9fbc0)
Spotify Wrapped linear-gradient: (to right, #0b1c1d, #2f5457, #708b49, #c7e47a, #eaf368, #f9c762, #ee9c44, #df6a4c, #d8466f, #972142)
Let's Go Barbie linear-gradient: (to right, #f07ba5, #f763a6, #ec438f, #ca1f6c, #a30f52, #910657, #bc048a, #e602bc, #ee41ce, #fc6fe)
Earth Tones linear-gradient: (to right, #582f0e, #7f4f24, #936639, #a68a64, #b6ad90, #c2c5aa, #a4ac86, #656d4a, #414833, #333d29)
Under the Sea linear-gradient: (to right, #0c0636, #0b2c50, #095169, #077682, #059b9a, #2cab8f, #53ba83, #79ca77, #9fd96b, #a8dc78)
Purple Rain linear-gradient: (to right, #c169f0, #c036eb, #9c00bf, #6e0c7d, #500561, #560977, #58088a, #7307ba, #830fcb, #9316db)
Charcoal linear-gradient: (to right, #616c6e, #618090, #113f52, #ffcc33, #354247)
Orange Juice linear-gradient: (to right, #f4e290, #f3d678, #f2c95f, #f1c255, #f2a540, #f28f38, #f97f41, #ff6e4a, #fb816f, #f79494)
Cambridge Blue

linear-gradient:

(to right, #75988a, #b0bfb2, #edede9, #f5f4f5, #e3dddf, #bca7a8, #885a5a)
Dark Forest linear-gradient: (to right, #b185db, #a06cd5, #815ac0, #6247aa, #393975, #102b3f, #02394a, #07333b, #0c2c2b, #062726)
Dramatic

linear-gradient:

(to right, #0b090a, #161a1d, #660708, #a4161a, #ba181b, #e5383b, #b1a7a6, #d3d3d3, #f5f3f4, #fffff)
Shades of Blue linear-gradient: (to right, #6782cb, #313e87, #232f7a, #151f6d, #10069f, #0047bb, #307fe2, #008ad8, #00a5bd, #3ccbda)
Retro linear-gradient: (to right, #dfe1e0, #8cc5c7, #39a9ad, #015a6c, #303030, #854158, #cc4c68, #c96b41, #c58919, #e1b047)
Wheaten linear-gradient: (to right, #bcd4d4, #9eb6b8, #fce7bd, #dbb567, #fce19d)
Cherry LA linear-gradient: (to right, #e28e8d, #ef7674, #ee676d, #ec5766, #e3465a, #da344d, #da2942, #d91e36, #cf213f, #c42348)
In Vogue linear-gradient: (to right, #ff9f98, #f88077, #fa5670, #ff6150, #883022, #cb8577, #f6aa7e, #d2a879, #ddba94, #fde4e0)
Ultramodern linear-gradient: (to right, #81586a, #522938, #46303c, #393640, #4d4950, #4f564b, #5d713a, #809848, #cbd565, #e4eba7)
Emerald City linear-gradient: (to right, #102910, #164d2f, #095440, #1a634e, #2a725c, #499167, #7dd181, #9cd08f, #bbd686, #e7f9a9)
Let's Game linear-gradient: (to right, #eaa23c, #ca673a, #a92b37, #6f3347, #353a57, #255498, #55b4b0, #a0cfcc, #bdc3bf, #eaeae8)
Pink Sunsets linear-gradient: (to right, #be3343, #b92e5b, #ba328b, #c14391, #e794bb, #ebb5cf, #e48361, #eaab69, #efc26c, #f3da76)
Pride linear-gradient: (to right, #ff0000, #ff8700, #ffd300, #deff0a, #a1ff0a, #0aff99, #0aefff, #147df5, #580aff, #be0aff)
All Hallows linear-gradient: (to right, #03071e, #370617, #6a040f, #9d0208, #d00000, #dc2f02, #e85d04, #f48c06, #faa307, #ffba08)