# UI swatches

Interface palettes pair neutral structure with restrained blue, teal, violet and orange accents for alternating light and dark layouts.

- Page: https://grabient.com/ui-swatches
- Palettes: 31
- Tags: ui, swatches, interface, gray, blue, teal, violet, orange
- Collected by: Grabient
- Updated: 2026-09-15

## Palettes

1. [Color Palette: Powder blue and gray](https://grabient.com/kY-Qa19gS_-WGv-iiT_yLo_9GruC?style=linearSwatches&steps=6): linear swatches, `#f5f9fe` `#e2e8f0` `#b6bec9` `#1f2833` `#2977d3` `#00a29b`
2. [Near-black, silver and terracotta color palette](https://grabient.com/kYKwnSHQY_7CJP_zhr_zra_9UzTi?style=linearSwatches&steps=6): linear swatches, `#100e14` `#1d1b24` `#44404f` `#e2dfec` `#8e70d5` `#d57b32`
3. [Pale mint and terracotta ui palette](https://grabient.com/kY-QZq8Qa_9uMv-jiUiSK9IlQzTi?style=angularSwatches&steps=6&angle=180): angular swatches, `#f5faf6` `#d3ded4` `#96ab99` `#1b2c32` `#7f66bb` `#d2792e`
4. [Near-black, gray and deep teal color palette](https://grabient.com/kYKQcgHAa_62JP_yhb_0Do_8wrz-?style=angularSwatches&steps=6&angle=225): angular swatches, `#110c0a` `#221814` `#483932` `#e8dcd6` `#d56327` `#009482`
5. [Cream, gray and cobalt blue color palette](https://grabient.com/kY9gcj84W_-CHv-gCT_0Da_8czLY?style=linearSwatches&steps=6&angle=135): linear swatches, `#faf3ef` `#eaded8` `#bdaea6` `#2c1f17` `#cf6924` `#3275c4`
6. [Near-black, silver and violet color palette](https://grabient.com/kYLg-Dnok_7GLP_1BL_zbM_8wvTO?style=angularSwatches&steps=6&angle=315): angular swatches, `#071513` `#112321` `#324a47` `#dce8e6` `#00988c` `#866ec4`
7. [Dark gray, blue, teal and tan](https://grabient.com/kWShGO8IA_0axylQGzTXqQxQ?style=linearSwatches&steps=5&angle=180): linear swatches, `#1d2f30` `#d9d9d9` `#6f64be` `#4d9895` `#d5a164`
8. [Pale lavender and cobalt blue color palette](https://grabient.com/kW9gfgHoa_8O6P_WukwSbotA?style=linearSwatches&steps=5): linear swatches, `#f7f3f9` `#231d25` `#8e49aa` `#e07b11` `#3678d6`
9. [Blue and orange color palette](https://grabient.com/kW9A-1nQe_8c9v_Rrzg2Tov4?style=linearSwatches&steps=5): linear swatches, `#eaf3ff` `#161d26` `#1c73d4` `#00a29b` `#e97f27`
10. [Blush, mauve and teal color palette](https://grabient.com/kW-QQSUAk_6yMv-PA0l1DTJY?style=linearSwatches&steps=5): linear swatches, `#fcf7f7` `#988481` `#4b3431` `#060603` `#00a99d`
11. [Color Palette: Powder blue and deep teal](https://grabient.com/kW8Q_AGZQ_8mvNVXujDRjayA?style=linearSwatches&steps=5&angle=135): linear swatches, `#e8eefd` `#0d142f` `#008e7c` `#e67a29` `#7a5cbf`
12. [Near-black, off-white and crimson color palette](https://grabient.com/kWNABAOIO-G6Bvf7AMXUDu3o?style=radialSwatches&steps=5&angle=0): radial swatches, `#171717` `#57534e` `#d6d3d2` `#f5f5f4` `#d95e39`
13. [Off-white and blue color palette](https://grabient.com/kU7gGsMAZBEcMP3DJsAA?style=linearSwatches&steps=4&angle=180): linear swatches, `#e9eaeb` `#3c434b` `#657687` `#326fa5`
14. [Dusty blue, stone and violet color palette](https://grabient.com/kWQgy8Pom_1yKw70hUCTU-_A?style=linearSwatches&steps=5): linear swatches, `#20242c` `#596170` `#a8a4b8` `#e5e2ec` `#8c5cf6`
15. [Near-black, gray and pale blush color palette](https://grabient.com/kWOAlucAS_86Mv_nDKx-wM_4?style=angularSwatches&steps=5&angle=205): angular swatches, `#161c18` `#d2dbd4` `#768c7d` `#d4b9c4` `#f9f2f5`
16. [Stone, gray and peach ui palette](https://grabient.com/kW9AXsagg-csMvjVGcFaZFNo?style=linearSwatches&steps=5&angle=45): linear swatches, `#f5f0f4` `#cfc4d2` `#82798e` `#a688b3` `#dbc3a7`
17. [Stone and sage ui palette](https://grabient.com/kW3wlTXwlFL0Pwa-GsLYQ49o?style=linearSwatches&steps=5): linear swatches, `#d6d8cf` `#a0b2a8` `#43665d` `#1e6c70` `#98bbb4`
18. [Teal and sage ui palette](https://grabient.com/kWPBCeMIm-NaNPZpCTyx5zDA?style=radialSwatches&steps=5&angle=0): radial swatches, `#122126` `#32474a` `#80a09c` `#b9ccc1` `#34847c`
19. [Champagne and peach ui palette](https://grabient.com/kW5w83Yo0_UANPrRJkA5hVAw?style=linearSwatches&steps=5&angle=45): linear swatches, `#e9e0d2` `#c5b39e` `#746050` `#b87d42` `#d7b996`
20. [Stone and sage color palette](https://grabient.com/kY3Amk-II4tMIRvcEqtMgireWGvg?style=radialSwatches&steps=6&angle=0): radial swatches, `#cbd5da` `#ebefed` `#83939b` `#c09e88` `#3b4852` `#b2c0c6`
21. [Teal and powder blue color palette](https://grabient.com/kUpUSobJM9cEjQ_2Bz8A?style=linearSwatches&steps=4): linear swatches, `#5198c1` `#a9d9e5` `#366a9b` `#ddeaf4`
22. [Blue and tan color palette](https://grabient.com/kWNyq5qBE_NkRqy4DdTI5q_A?style=angularSwatches&steps=5&angle=135): angular swatches, `#091934` `#213349` `#af9c7d` `#455467` `#022a4b`
23. [Pastel blue, gray, green and tan](https://grabient.com/kUvCCZaow4VMZv7amziA?style=linearSwatches&steps=4): linear swatches, `#8cb2bc` `#bbd1bf` `#729d79` `#b7a06c`
24. [Navy and violet color palette](https://grabient.com/kQVFLNvifAo?style=radialSwatches&steps=5&angle=135): radial swatches, `#36276b` `#3f2f73` `#4d3c80` `#5b498d` `#655196`
25. [Mauve, gold and gray color palette](https://grabient.com/kUqCOmaZivPMKv5ICDGA?style=linearSwatches&steps=4): linear swatches, `#7698ac` `#d7c795` `#e8dfcb` `#7e727d`
26. [Orange green interface rings](https://grabient.com/kW_gBAdwNDtKHwImBcGTDYzg?style=radialSwatches&steps=5&angle=0): radial swatches, `#ffffff` `#e9ebe5` `#8c9284` `#2a3028` `#c8593b`
27. [Violet charcoal interface rings](https://grabient.com/kW-ATb9IU_c6MQAqDL_SVU9Y?style=radialSwatches&steps=5&angle=0): radial swatches, `#f8f6fa` `#e6e2eb` `#8a8196` `#393144` `#6f55fb`
28. [White, gray and navy](https://grabient.com/kW-AJb9gHIGwEw7MjEGqYu_o?style=radialSwatches&steps=5&angle=0): radial swatches, `#f7f8f6` `#e5e8e8` `#c6d0d4` `#718494` `#263744`
29. [Cyan Cream Red](https://grabient.com/kWQBOsa4qrVWXPjKkz3QQy4A?style=angularSwatches&steps=5&angle=135): angular swatches, `#17242e` `#dacab9` `#b68c72` `#997167` `#726071`
30. [Red Cream Cyan](https://grabient.com/kWqy4mSpM92uKw86DVSqYu_w?style=angularSwatches&steps=5&angle=120): angular swatches, `#b68c72` `#997267` `#dacab9` `#465a6a` `#263744`
31. [Cream Cyan Cream](https://grabient.com/kW-AJboAnNeuKq1eCNQOg1Ag?style=radialSwatches&steps=5&angle=0): radial swatches, `#f7f8f6` `#17242e` `#dacab9` `#9eadb8` `#465a6a`

## Other forms

- [JSON](https://grabient.com/api/collections/ui-swatches)
- [ASE](https://grabient.com/ui-swatches.ase)
- [GPL](https://grabient.com/ui-swatches.gpl)
- [GRD](https://grabient.com/ui-swatches.grd)
- [Design tokens](https://grabient.com/ui-swatches.tokens.json)
- [Image](https://grabient.com/api/png/collection?slug=ui-swatches)
- [Social card](https://grabient.com/api/og/collection?slug=ui-swatches&v=k4)
- [More collections](https://grabient.com/collections)
- [Guide for agents](https://grabient.com/llms.txt)