Created at 08/02/2025 10:21
  21

Hypermedia Design Systems Flow

  • Framework Pink
    #f49ac2
  • Markup White
    #fdfdfd
  • Element Grey
    #e5e5e5
  • Scroll Orange
    #ffa552
  • Syntax Cyan
    #5ac8fa
  • Backend Graphite
    #2f2f2f
  • AI Layer Blue
    #6c8ae4
The palette consists of Light, Dark colors. Accent colors Scroll Orange #ffa552 and Syntax Cyan #5ac8fa. Palette has Warm, Neutral, Cool colors temperature.

By lightness, this palette runs from #2F2F2F (darkest) to #FDFDFD (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).

Warm and cool swatches are fairly balanced.

HEX codes (sorted): #2F2F2F, #5AC8FA, #6C8AE4, #E5E5E5, #F49AC2, #FDFDFD, #FFA552

Palette Hypermedia Design Systems Flow has combination of 7 codes colors:
HEX: #f49ac2, RGB: (244, 154, 194); HEX: #fdfdfd, RGB: (253, 253, 253); HEX: #e5e5e5, RGB: (229, 229, 229)
HEX: #ffa552, RGB: (255, 165, 82); HEX: #5ac8fa, RGB: (90, 200, 250); HEX: #2f2f2f, RGB: (47, 47, 47)
HEX: #6c8ae4, RGB: (108, 138, 228)
Simplified version of palette colors
Shade of plum, Tint of White, Shade of gainsboro, Shade of sandybrown, Shade of deepskyblue, Shade of Black, Tint of cornflowerblue
Color scheme was created by raccoon

Colors codes in palette

Hypermedia Design Systems Flow color codes HEX, RGB information in table

Color HEX RGB Name Alternative name
#f49ac2 #f49ac2 RGB(244, 154, 194)Framework PinkPastel Magenta
#fdfdfd #fdfdfd RGB(253, 253, 253)Markup WhiteBrilliance
#e5e5e5 #e5e5e5 RGB(229, 229, 229)Element GreyGray90
#ffa552 #ffa552 RGB(255, 165, 82)Scroll Orange
#5ac8fa #5ac8fa RGB(90, 200, 250)Syntax Cyan
#2f2f2f #2f2f2f RGB(47, 47, 47)Backend Graphite
#6c8ae4 #6c8ae4 RGB(108, 138, 228)AI Layer Blue

Color Palette Contrast

12 color pairs have low contrast and need improvement which may impact readability.
Text Color Background Color Contrast Ratio
#f49ac2
#e5e5e5
1.62
#f49ac2
#ffa552
1.04
#f49ac2
#5ac8fa
1.08
#f49ac2
#6c8ae4
1.6
#fdfdfd
#e5e5e5
1.23
#fdfdfd
#ffa552
1.91

Image palette Hypermedia Design Systems Flow png