GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2026-03-24 23:15:46 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity
ac3ad47b23
quartz/content/Color Palettes.md

164 lines
13 KiB
Markdown
Raw Blame History

---
title: Color Palettes
compartir: true
---
# Color Palettes
| Color | 🎨 | Hex |
| :--------: | :------------------------------------------------------------: | :-------: |
| Background | <div style="background:#fdebf3;width:1rem;height:1rem;"></div> | `#fdebf3` |
| Background | <div style="background:#f3f4f6;width:1rem;height:1rem;"></div> | `#f3f4f6` |
| Background | <div style="background:#e7dff2;width:1rem;height:1rem;"></div> | `#e7dff2` |
| Background | <div style="background:#fbfefb;width:1rem;height:1rem;"></div> | `#fbfefb` |
| Background | <div style="background:#1e1e2e;width:1rem;height:1rem;"></div> | `#1e1e2e` |
| Background | <div style="background:#1e1e1e;width:1rem;height:1rem;"></div> | `#1e1e1e` |
| Background | <div style="background:#333333;width:1rem;height:1rem;"></div> | `#333333` |
| Background | <div style="background:#1f2937;width:1rem;height:1rem;"></div> | `#1f2937` |
| Background | <div style="background:#212737;width:1rem;height:1rem;"></div> | `#212737` |
| Color | 🎨 | Hex |
| ------ | -------------------------------------------------------------: | --------- |
| Accent | <div style="background:#ff6b01;width:1rem;height:1rem;"></div> | `#ff6b01` |
| Accent | <div style="background:#d8b4fe;width:1rem;height:1rem;"></div> | `#d8b4fe` |
| Accent | <div style="background:#7e22ce;width:1rem;height:1rem;"></div> | `#7e22ce` |
| Accent | <div style="background:#ff7413;width:1rem;height:1rem;"></div> | `#ff7413` |
| Accent | <div style="background:#d26878;width:1rem;height:1rem;"></div> | `#d26878` |
| Accent | <div style="background:#7866ad;width:1rem;height:1rem;"></div> | `#7866ad` |
| Accent | <div style="background:#50fa7b;width:1rem;height:1rem;"></div> | `#50fa7b` |
| Accent | <div style="background:#663399;width:1rem;height:1rem;"></div> | `#663399` |
| Accent | <div style="background:#9be895;width:1rem;height:1rem;"></div> | `#9be895` |
| Accent | <div style="background:#c072c4;width:1rem;height:1rem;"></div> | `#c072c4` |
| Accent | <div style="background:#aa336a;width:1rem;height:1rem;"></div> | `#aa336a` |
| Color | 🎨 | Hex |
| ----- | -------------------------------------------------------------: | --------- |
| Text | <div style="background:#d1d5db;width:1rem;height:1rem;"></div> | `#d1d5db` |
| Text | <div style="background:#282728;width:1rem;height:1rem;"></div> | `#282728` |
## Ariake Dark
| Color | 🎨 | Hex |
| ------ | -------------------------------------------------------------: | --------- |
| Accent | <div style="background:#2a2d37;width:1rem;height:1rem;"></div> | `#2a2d37` |
| Accent | <div style="background:#22212d;width:1rem;height:1rem;"></div> | `#22212d` |
| Accent | <div style="background:#f5faff;width:1rem;height:1rem;"></div> | `#f5faff` |
| Accent | <div style="background:#7fb3e1;width:1rem;height:1rem;"></div> | `#7fb3e1` |
| Accent | <div style="background:#dda2f6;width:1rem;height:1rem;"></div> | `#dda2f6` |
| Accent | <div style="background:#8af1ea;width:1rem;height:1rem;"></div> | `#8af1ea` |
## Aura
| Color | 🎨 | Hex |
| ------ | -------------------------------------------------------------: | --------- |
| Accent | <div style="background:#a277ff;width:1rem;height:1rem;"></div> | `#a277ff` |
| Accent | <div style="background:#82e2ff;width:1rem;height:1rem;"></div> | `#82e2ff` |
| Accent | <div style="background:#61ffca;width:1rem;height:1rem;"></div> | `#61ffca` |
| Accent | <div style="background:#f694ff;width:1rem;height:1rem;"></div> | `#f694ff` |
| Accent | <div style="background:#ba9566;width:1rem;height:1rem;"></div> | `#ba9566` |
## `Main` > `Dark Soft`
| Color | Hex | RGB | Token | Mostly used as | 🎨 |
| ------ | ----------- | ----------- | -------- | -------------------------- | --------------------------------------------------------- |
| Purple | `#8464c6` | 132,100,198 | accent1 | Primary color | <img src="https://placeholder.pics/svg/20x20/8464c6" /> |
| Purple | `#3d375e7f` | 61,55,94 | accent20 | Selections | <img src="https://placeholder.pics/svg/20x20/3d375e7f" /> |
| Purple | `#29263c` | 41,38,60 | accent38 | Selections (without alpha) | <img src="https://placeholder.pics/svg/20x20/29263c" /> |
| Green | `#54c59f` | 84,197,159 | accent2 | Secondary color | <img src="https://placeholder.pics/svg/20x20/54c59f" /> |
| Orange | `#c7a06f` | 199,160,111 | accent3 | Tertiary color | <img src="https://placeholder.pics/svg/20x20/c7a06f" /> |
| Pink | `#c17ac8` | 193,122,200 | accent6 | Quaternary color | <img src="https://placeholder.pics/svg/20x20/c17ac8" /> |
| Blue | `#6cb2c7` | 108,178,199 | accent32 | Quinary color | <img src="https://placeholder.pics/svg/20x20/6cb2c7" /> |
| Red | `#c55858` | 197,88,88 | accent5 | Senary color | <img src="https://placeholder.pics/svg/20x20/c55858" /> |
| White | `#bdbdbd` | 189,189,189 | accent7 | Foregrounds | <img src="https://placeholder.pics/svg/20x20/bdbdbd" /> |
| Gray | `#6d6d6d` | 109,109,109 | accent8 | Comments | <img src="https://placeholder.pics/svg/20x20/6d6d6d" /> |
| Black | `#15141b` | 21,20,27 | accent12 | Backgrounds | <img src="https://placeholder.pics/svg/20x20/15141b" /> |
## `Main` > `Dark`
| Color | Hex | RGB | Token | Mostly used as | 🎨 |
| ------ | ----------- | ----------- | -------- | -------------------------- | --------------------------------------------------------- |
| Purple | `#a277ff` | 162,119,255 | accent1 | Primary color | <img src="https://placeholder.pics/svg/20x20/a277ff" /> |
| Purple | `#3d375e7f` | 61,55,94 | accent20 | Selections | <img src="https://placeholder.pics/svg/20x20/3d375e7f" /> |
| Purple | `#29263c` | 41,38,60 | accent38 | Selections (without alpha) | <img src="https://placeholder.pics/svg/20x20/29263c" /> |
| Green | `#61ffca` | 97,255,202 | accent2 | Secondary color | <img src="https://placeholder.pics/svg/20x20/61ffca" /> |
| Orange | `#ffca85` | 255,202,133 | accent3 | Tertiary color | <img src="https://placeholder.pics/svg/20x20/ffca85" /> |
| Pink | `#f694ff` | 246,148,255 | accent6 | Quaternary color | <img src="https://placeholder.pics/svg/20x20/f694ff" /> |
| Blue | `#82e2ff` | 130,226,255 | accent32 | Quinary color | <img src="https://placeholder.pics/svg/20x20/82e2ff" /> |
| Red | `#ff6767` | 255,103,103 | accent5 | Senary color | <img src="https://placeholder.pics/svg/20x20/ff6767" /> |
| White | `#edecee` | 237,236,238 | accent7 | Foregrounds | <img src="https://placeholder.pics/svg/20x20/edecee" /> |
| Gray | `#6d6d6d` | 109,109,109 | accent8 | Comments | <img src="https://placeholder.pics/svg/20x20/6d6d6d" /> |
| Black | `#15141b` | 21,20,27 | accent12 | Backgrounds | <img src="https://placeholder.pics/svg/20x20/15141b" /> |
## Merge All Tables
| 🎨 | Hex |
| :------------------------------------------------------------: | :-------: |
| <div style="background:#fdebf3;width:1rem;height:1rem;"></div> | `#fdebf3` |
| <div style="background:#f3f4f6;width:1rem;height:1rem;"></div> | `#f3f4f6` |
| <div style="background:#e7dff2;width:1rem;height:1rem;"></div> | `#e7dff2` |
| <div style="background:#fbfefb;width:1rem;height:1rem;"></div> | `#fbfefb` |
| <div style="background:#1e1e2e;width:1rem;height:1rem;"></div> | `#1e1e2e` |
| <div style="background:#1e1e1e;width:1rem;height:1rem;"></div> | `#1e1e1e` |
| <div style="background:#333333;width:1rem;height:1rem;"></div> | `#333333` |
| <div style="background:#1f2937;width:1rem;height:1rem;"></div> | `#1f2937` |
| <div style="background:#212737;width:1rem;height:1rem;"></div> | `#212737` |
| <div style="background:#ff6b01;width:1rem;height:1rem;"></div> | `#ff6b01` |
| <div style="background:#d8b4fe;width:1rem;height:1rem;"></div> | `#d8b4fe` |
| <div style="background:#7e22ce;width:1rem;height:1rem;"></div> | `#7e22ce` |
| <div style="background:#ff7413;width:1rem;height:1rem;"></div> | `#ff7413` |
| <div style="background:#d26878;width:1rem;height:1rem;"></div> | `#d26878` |
| <div style="background:#7866ad;width:1rem;height:1rem;"></div> | `#7866ad` |
| <div style="background:#50fa7b;width:1rem;height:1rem;"></div> | `#50fa7b` |
| <div style="background:#663399;width:1rem;height:1rem;"></div> | `#663399` |
| <div style="background:#9be895;width:1rem;height:1rem;"></div> | `#9be895` |
| <div style="background:#c072c4;width:1rem;height:1rem;"></div> | `#c072c4` |
| <div style="background:#aa336a;width:1rem;height:1rem;"></div> | `#aa336a` |
| <div style="background:#d1d5db;width:1rem;height:1rem;"></div> | `#d1d5db` |
| <div style="background:#282728;width:1rem;height:1rem;"></div> | `#282728` |
| <div style="background:#2a2d37;width:1rem;height:1rem;"></div> | `#2a2d37` |
| <div style="background:#22212d;width:1rem;height:1rem;"></div> | `#22212d` |
| <div style="background:#f5faff;width:1rem;height:1rem;"></div> | `#f5faff` |
| <div style="background:#7fb3e1;width:1rem;height:1rem;"></div> | `#7fb3e1` |
| <div style="background:#dda2f6;width:1rem;height:1rem;"></div> | `#dda2f6` |
| <div style="background:#8af1ea;width:1rem;height:1rem;"></div> | `#8af1ea` |
| <div style="background:#a277ff;width:1rem;height:1rem;"></div> | `#a277ff` |
| <div style="background:#82e2ff;width:1rem;height:1rem;"></div> | `#82e2ff` |
| <div style="background:#61ffca;width:1rem;height:1rem;"></div> | `#61ffca` |
| <div style="background:#f694ff;width:1rem;height:1rem;"></div> | `#f694ff` |
| <div style="background:#ba9566;width:1rem;height:1rem;"></div> | `#ba9566` |
| 🎨 | Hex |
| -------------------------------------------------------------- | --------- |
| <div style="background:#1e1e1e;width:1rem;height:1rem;"></div> | `#1e1e1e` |
| <div style="background:#1e1e2e;width:1rem;height:1rem;"></div> | `#1e1e2e` |
| <div style="background:#1f2937;width:1rem;height:1rem;"></div> | `#1f2937` |
| <div style="background:#212737;width:1rem;height:1rem;"></div> | `#212737` |
| <div style="background:#22212d;width:1rem;height:1rem;"></div> | `#22212d` |
| <div style="background:#282728;width:1rem;height:1rem;"></div> | `#282728` |
| <div style="background:#2a2d37;width:1rem;height:1rem;"></div> | `#2a2d37` |
| <div style="background:#333333;width:1rem;height:1rem;"></div> | `#333333` |
| <div style="background:#50fa7b;width:1rem;height:1rem;"></div> | `#50fa7b` |
| <div style="background:#61ffca;width:1rem;height:1rem;"></div> | `#61ffca` |
| <div style="background:#663399;width:1rem;height:1rem;"></div> | `#663399` |
| <div style="background:#7866ad;width:1rem;height:1rem;"></div> | `#7866ad` |
| <div style="background:#7e22ce;width:1rem;height:1rem;"></div> | `#7e22ce` |
| <div style="background:#7fb3e1;width:1rem;height:1rem;"></div> | `#7fb3e1` |
| <div style="background:#82e2ff;width:1rem;height:1rem;"></div> | `#82e2ff` |
| <div style="background:#8af1ea;width:1rem;height:1rem;"></div> | `#8af1ea` |
| <div style="background:#9be895;width:1rem;height:1rem;"></div> | `#9be895` |
| <div style="background:#aa336a;width:1rem;height:1rem;"></div> | `#aa336a` |
| <div style="background:#a277ff;width:1rem;height:1rem;"></div> | `#a277ff` |
| <div style="background:#ba9566;width:1rem;height:1rem;"></div> | `#ba9566` |
| <div style="background:#c072c4;width:1rem;height:1rem;"></div> | `#c072c4` |
| <div style="background:#d1d5db;width:1rem;height:1rem;"></div> | `#d1d5db` |
| <div style="background:#d26878;width:1rem;height:1rem;"></div> | `#d26878` |
| <div style="background:#d8b4fe;width:1rem;height:1rem;"></div> | `#d8b4fe` |
| <div style="background:#dda2f6;width:1rem;height:1rem;"></div> | `#dda2f6` |
| <div style="background:#e7dff2;width:1rem;height:1rem;"></div> | `#e7dff2` |
| <div style="background:#edecee;width:1rem;height:1rem;"></div> | `#edecee` |
| <div style="background:#f3f4f6;width:1rem;height:1rem;"></div> | `#f3f4f6` |
| <div style="background:#f5faff;width:1rem;height:1rem;"></div> | `#f5faff` |
| <div style="background:#f694ff;width:1rem;height:1rem;"></div> | `#f694ff` |
| <div style="background:#f7f8fc;width:1rem;height:1rem;"></div> | `#f7f8fc` |
| <div style="background:#fbfefb;width:1rem;height:1rem;"></div> | `#fbfefb` |
| <div style="background:#fdebf3;width:1rem;height:1rem;"></div> | `#fdebf3` |
Reference in New Issue View Git Blame Copy Permalink