Created at 04/15/2026 11:36
AI Assisted Full Stack React TypeScript Design System Toolkit
- Stack Night#0d1117
- React Sky#61dafb
- TS Indigo#3178c6
- Hook Green#2dd4bf
- State Amber#fbbf24
- Error Rose#fb7185
- Surface Gray#9aa4b2
- Base White#f8fafc
The palette consists of Dark, Light colors. Accent colors React Sky #61dafb and State Amber #fbbf24. Palette has Neutral, Cool, Warm colors temperature.
By lightness, this palette runs from #0D1117 (darkest) to #F8FAFC (lightest). The lightness range is wide.
Overall saturation feels vivid (higher chroma).
Some hue pairs sit near complementary positions — you may read this as complementary contrast (loose heuristic).
Overall temperature among swatches leans cool.
HEX codes (sorted): #0D1117, #2DD4BF, #3178C6, #61DAFB, #9AA4B2, #F8FAFC, #FB7185, #FBBF24
Palette AI Assisted Full Stack React TypeScript Design System Toolkit has combination of 8 codes colors:
HEX: #0d1117, RGB: (13, 17, 23); HEX: #61dafb, RGB: (97, 218, 251); HEX: #3178c6, RGB: (49, 120, 198)
HEX: #2dd4bf, RGB: (45, 212, 191); HEX: #fbbf24, RGB: (251, 191, 36); HEX: #fb7185, RGB: (251, 113, 133)
HEX: #9aa4b2, RGB: (154, 164, 178); HEX: #f8fafc, RGB: (248, 250, 252)
Simplified version of palette colors
Shade of Black, Tint of skyblue, Tint of steelblue, Tint of turquoise, Shade of goldenrod, Tint of lightcoral, Tint of darkgrey, Shade of whitesmoke
Color scheme was created by colorslib
Colors codes in palette
AI Assisted Full Stack React TypeScript Design System Toolkit color codes HEX, RGB information in table
| Color | HEX | RGB | Name | Alternative name |
| #0d1117 | #0d1117 | RGB(13, 17, 23) | Stack Night | — |
| #61dafb | #61dafb | RGB(97, 218, 251) | React Sky | — |
| #3178c6 | #3178c6 | RGB(49, 120, 198) | TS Indigo | — |
| #2dd4bf | #2dd4bf | RGB(45, 212, 191) | Hook Green | — |
| #fbbf24 | #fbbf24 | RGB(251, 191, 36) | State Amber | — |
| #fb7185 | #fb7185 | RGB(251, 113, 133) | Error Rose | — |
| #9aa4b2 | #9aa4b2 | RGB(154, 164, 178) | Surface Gray | — |
| #f8fafc | #f8fafc | RGB(248, 250, 252) | Base White | — |
Color Palette Contrast
15 color pairs have low contrast and need improvement which may impact readability.
| Text Color | Background Color | Contrast Ratio |
#61dafb | #2dd4bf | 1.14 |
#61dafb | #fbbf24 | 1.02 |
#61dafb | #fb7185 | 1.65 |
#61dafb | #9aa4b2 | 1.55 |
#61dafb | #f8fafc | 1.55 |
#3178c6 | #fb7185 | 1.68 |
Image palette AI Assisted Full Stack React TypeScript Design System Toolkit png
Export Palette
Download the "AI Assisted Full Stack React TypeScript Design System Toolkit" in multiple formats for seamless integration into your design projects.
Available formats: