Generate Palette
  1. Colors palettes
  2. Next.js UX Semantic Layout
Created at 07/20/2025 20:08
bycoolor
  21

Next.js UX Semantic Layout

  • Framework White
    #f9fafb
  • Dynamic Indigo
    #5c6bc0
  • Route Green
    #2dd4bf
  • Server Pink
    #ff7aa2
  • SEO Sand
    #fbe8a6
  • Static Navy
    #1a202c
The palette consists of Light, Dark colors. Accent colors Route Green #2dd4bf and Server Pink #ff7aa2. Palette has Neutral, Cool, Warm colors temperature.

By lightness, this palette runs from #1A202C (darkest) to #F9FAFB (lightest). The lightness range is wide.

Saturation is mixed — some muted swatches and some vivid accents.

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): #1A202C, #2DD4BF, #5C6BC0, #F9FAFB, #FBE8A6, #FF7AA2

Palette Next.js UX Semantic Layout has combination of 6 codes colors:
HEX: #f9fafb, RGB: (249, 250, 251); HEX: #5c6bc0, RGB: (92, 107, 192); HEX: #2dd4bf, RGB: (45, 212, 191)
HEX: #ff7aa2, RGB: (255, 122, 162); HEX: #fbe8a6, RGB: (251, 232, 166); HEX: #1a202c, RGB: (26, 32, 44)
Simplified version of palette colors
Shade of whitesmoke, Shade of royalblue, Tint of turquoise, Shade of palevioletred, Shade of palegoldenrod, Shade of Black
Color scheme was created by coolor

Colors codes in palette

Next.js UX Semantic Layout color codes HEX, RGB information in table

Color HEX RGB Name Alternative name
#f9fafb #f9fafb RGB(249, 250, 251)Framework White—
#5c6bc0 #5c6bc0 RGB(92, 107, 192)Dynamic Indigo—
#2dd4bf #2dd4bf RGB(45, 212, 191)Route Green—
#ff7aa2 #ff7aa2 RGB(255, 122, 162)Server Pink—
#fbe8a6 #fbe8a6 RGB(251, 232, 166)SEO Sand—
#1a202c #1a202c RGB(26, 32, 44)Static Navy—

Color Palette Contrast

5 color pairs have low contrast and need improvement which may impact readability.
Text Color Background Color Contrast Ratio
#f9fafb
#2dd4bf
1.78
#f9fafb
#fbe8a6
1.16
#5c6bc0
#ff7aa2
1.98
#2dd4bf
#ff7aa2
1.31
#2dd4bf
#fbe8a6
1.52

Image palette Next.js UX Semantic Layout png

Next.js UX Semantic Layout - #555950
 Download image