Color Palette

Flow — Interactive Generative Art

302F30
Copy As
HEX#302F30
RGBrgb(48,47,48)
HSLhsl(300, 1%, 19%)
CMYKcmyk(0%, 2%, 0%, 81%)
Download
SVG PNG
1B1A1B
Copy As
HEX#1B1A1B
RGBrgb(27,26,27)
HSLhsl(300, 2%, 10%)
CMYKcmyk(0%, 4%, 0%, 89%)
Download
SVG PNG
424140
Copy As
HEX#424140
RGBrgb(66,65,64)
HSLhsl(30, 2%, 25%)
CMYKcmyk(0%, 2%, 3%, 74%)
Download
SVG PNG
565351
Copy As
HEX#565351
RGBrgb(86,83,81)
HSLhsl(24, 3%, 33%)
CMYKcmyk(0%, 3%, 6%, 66%)
Download
SVG PNG
646361
Copy As
HEX#646361
RGBrgb(100,99,97)
HSLhsl(40, 2%, 39%)
CMYKcmyk(0%, 1%, 3%, 61%)
Download
SVG PNG
6B7577
Copy As
HEX#6B7577
RGBrgb(107,117,119)
HSLhsl(190, 5%, 44%)
CMYKcmyk(10%, 2%, 0%, 53%)
Download
SVG PNG
7C929A
Copy As
HEX#7C929A
RGBrgb(124,146,154)
HSLhsl(196, 13%, 55%)
CMYKcmyk(19%, 5%, 0%, 40%)
Download
SVG PNG
8FA7AA
Copy As
HEX#8FA7AA
RGBrgb(143,167,170)
HSLhsl(187, 14%, 61%)
CMYKcmyk(16%, 2%, 0%, 33%)
Download
SVG PNG
#302F30
#1B1A1B
#424140
#565351
#646361
#6B7577
#7C929A
#8FA7AA
Flow

This palette was extracted from

Flow

Award-Winning Interactive Generative Art

About the Design

This design features Dark Slate Gray, Black, Dim Gray, Light Slate Gray, and Dark Gray.

About the Award-Winning Interactive Generative Art Design: Flow is an interactive generative artwork that responds to written prompts and body movement. A visitor types a short description of an image, and the image is generated on screen in real time, without waiting. A camera captures the movement of the visitor, and the captured motion is turned into data that changes particles and other visual effects within the generated image. A fast generative model and a preset resolution of 500 by 500 pixels keep the response smooth. Flow lets people without technical training shape artificial intelligence images directly.

This palette has a balanced temperature, offering versatility in various contexts.

View at A' Design Award

Flow, the inspiration behind this palette, was designed by Yuming Chen.

Color Data for Professionals

Technical color information for designers and developers. Click any value to copy.


Dark Slate Gray
50.1% Gray
Web Formats
HEX#302F30
RGB48,47,48
HSLhsl(300, 1%, 19%)
HWBhwb(300, 18%, 81%)
Print & Design
CMYKcmyk(0%, 2%, 0%, 81%)
HSVhsv(300, 2%, 19%)
Perceptual (Color Science)
LABlab(19.54, 0.68, -0.48)
LCHlch(19.54, 0.83, 324.5°)
XYZxyz(2.77, 2.87, 3.2)
OKLaboklab(0.3066, 0.0019, -0.0013)
Accessibility (WCAG 2.1)
Aa
On White
13.33:1
AAA Pass
Aa
On Black
1.57:1
Fail
Aa
White on Color
13.33:1
AAA Pass
Aa
Black on Color
1.57:1
Fail
2.9%
Relative Luminance
0.0287
Very Dark

Relative luminance defines the perceived brightness of a color. Values range from 0 (pure black) to 1 (pure white). This metric is essential for calculating WCAG contrast ratios.


Black
16.1% Black
Web Formats
HEX#1B1A1B
RGB27,26,27
HSLhsl(300, 2%, 10%)
HWBhwb(300, 10%, 89%)
Print & Design
CMYKcmyk(0%, 4%, 0%, 89%)
HSVhsv(300, 4%, 11%)
Perceptual (Color Science)
LABlab(9.41, 0.74, -0.52)
LCHlch(9.41, 0.9, 324.6°)
XYZxyz(1.02, 1.05, 1.19)
OKLaboklab(0.2193, 0.002, -0.0014)
Accessibility (WCAG 2.1)
Aa
On White
17.35:1
AAA Pass
Aa
On Black
1.21:1
Fail
Aa
White on Color
17.35:1
AAA Pass
Aa
Black on Color
1.21:1
Fail
1.1%
Relative Luminance
0.0105
Very Dark

Relative luminance defines the perceived brightness of a color. Values range from 0 (pure black) to 1 (pure white). This metric is essential for calculating WCAG contrast ratios.


Dark Slate Gray
9.3% Gray
Web Formats
HEX#424140
RGB66,65,64
HSLhsl(30, 2%, 25%)
HWBhwb(30, 25%, 74%)
Print & Design
CMYKcmyk(0%, 2%, 3%, 74%)
HSVhsv(30, 3%, 26%)
Perceptual (Color Science)
LABlab(27.6, 0.2, 0.76)
LCHlch(27.6, 0.78, 75.1°)
XYZxyz(5.06, 5.31, 5.61)
OKLaboklab(0.3759, 0.0008, 0.002)
Accessibility (WCAG 2.1)
Aa
On White
10.19:1
AAA Pass
Aa
On Black
2.06:1
Fail
Aa
White on Color
10.19:1
AAA Pass
Aa
Black on Color
2.06:1
Fail
5.3%
Relative Luminance
0.0531
Dark

Relative luminance defines the perceived brightness of a color. Values range from 0 (pure black) to 1 (pure white). This metric is essential for calculating WCAG contrast ratios.


Dark Slate Gray
8.8% Gray
Web Formats
HEX#565351
RGB86,83,81
HSLhsl(24, 3%, 33%)
HWBhwb(24, 32%, 66%)
Print & Design
CMYKcmyk(0%, 3%, 6%, 66%)
HSVhsv(24, 6%, 34%)
Perceptual (Color Science)
LABlab(35.52, 0.8, 1.6)
LCHlch(35.52, 1.79, 63.4°)
XYZxyz(8.42, 8.76, 9.03)
OKLaboklab(0.4444, 0.0028, 0.0042)
Accessibility (WCAG 2.1)
Aa
On White
7.63:1
AAA Pass
Aa
On Black
2.75:1
Fail
Aa
White on Color
7.63:1
AAA Pass
Aa
Black on Color
2.75:1
Fail
8.8%
Relative Luminance
0.0876
Dark

Relative luminance defines the perceived brightness of a color. Values range from 0 (pure black) to 1 (pure white). This metric is essential for calculating WCAG contrast ratios.


Dim Gray
6.1% Gray
Web Formats
HEX#646361
RGB100,99,97
HSLhsl(40, 2%, 39%)
HWBhwb(40, 38%, 61%)
Print & Design
CMYKcmyk(0%, 1%, 3%, 61%)
HSVhsv(40, 3%, 39%)
Perceptual (Color Science)
LABlab(41.99, -0.02, 1.27)
LCHlch(41.99, 1.27, 90.8°)
XYZxyz(11.87, 12.5, 13.09)
OKLaboklab(0.4999, 0.0003, 0.0034)
Accessibility (WCAG 2.1)
Aa
On White
6.00:1
AA Pass
Aa
On Black
3.50:1
Large Only
Aa
White on Color
6.00:1
AA Pass
Aa
Black on Color
3.50:1
Large Only
12.5%
Relative Luminance
0.1250
Dark

Relative luminance defines the perceived brightness of a color. Values range from 0 (pure black) to 1 (pure white). This metric is essential for calculating WCAG contrast ratios.


Dim Gray
3.3% Gray
Web Formats
HEX#6B7577
RGB107,117,119
HSLhsl(190, 5%, 44%)
HWBhwb(190, 42%, 53%)
Print & Design
CMYKcmyk(10%, 2%, 0%, 53%)
HSVhsv(190, 10%, 47%)
Perceptual (Color Science)
LABlab(48.49, -3.3, -2.38)
LCHlch(48.49, 4.07, 215.8°)
XYZxyz(15.75, 17.18, 19.94)
OKLaboklab(0.5547, -0.0107, -0.0064)
Accessibility (WCAG 2.1)
Aa
On White
4.73:1
AA Pass
Aa
On Black
4.44:1
Large Only
Aa
White on Color
4.73:1
AA Pass
Aa
Black on Color
4.44:1
Large Only
17.2%
Relative Luminance
0.1718
Dark

Relative luminance defines the perceived brightness of a color. Values range from 0 (pure black) to 1 (pure white). This metric is essential for calculating WCAG contrast ratios.


Light Slate Gray
3.3% Gray
Web Formats
HEX#7C929A
RGB124,146,154
HSLhsl(196, 13%, 55%)
HWBhwb(196, 49%, 40%)
Print & Design
CMYKcmyk(19%, 5%, 0%, 40%)
HSVhsv(196, 19%, 60%)
Perceptual (Color Science)
LABlab(59.14, -5.99, -6.83)
LCHlch(59.14, 9.09, 228.8°)
XYZxyz(24.42, 27.18, 34.52)
OKLaboklab(0.6454, -0.0207, -0.0185)
Accessibility (WCAG 2.1)
Aa
On White
3.26:1
Large Only
Aa
On Black
6.44:1
AA Pass
Aa
White on Color
3.26:1
Large Only
Aa
Black on Color
6.44:1
AA Pass
27.2%
Relative Luminance
0.2718
Mid-tone

Relative luminance defines the perceived brightness of a color. Values range from 0 (pure black) to 1 (pure white). This metric is essential for calculating WCAG contrast ratios.


Dark Gray
3.0% Gray
Web Formats
HEX#8FA7AA
RGB143,167,170
HSLhsl(187, 14%, 61%)
HWBhwb(187, 56%, 33%)
Print & Design
CMYKcmyk(16%, 2%, 0%, 33%)
HSVhsv(187, 16%, 67%)
Perceptual (Color Science)
LABlab(66.81, -7.65, -4.34)
LCHlch(66.81, 8.8, 209.6°)
XYZxyz(32.4, 36.38, 43.34)
OKLaboklab(0.711, -0.0244, -0.0118)
Accessibility (WCAG 2.1)
Aa
On White
2.54:1
Fail
Aa
On Black
8.28:1
AAA Pass
Aa
White on Color
2.54:1
Fail
Aa
Black on Color
8.28:1
AAA Pass
36.4%
Relative Luminance
0.3638
Mid-tone

Relative luminance defines the perceived brightness of a color. Values range from 0 (pure black) to 1 (pure white). This metric is essential for calculating WCAG contrast ratios.

These colors were identified within Yuming Chen's celebrated design "Flow".

About the Designer

Yuming Chen

Yuming Chen is an acclaimed design visionary recognized by the A' Design Award. Their creative vision reflects exceptional skill in creative direction.

Yuming Chen is a PhD researcher in i-DAT, Plymouth University, and the co-founder of Limoda Studio. His background is Interaction Design, with a MA from Creative Computing Institute at the University of the Arts London, and with skills in Digital Media Arts. His research interests lie in AI art, generative art and dome.

Discover more color palettes from Chen's award-winning work.

Silver A' Generative, Algorithmic, Parametric and AI-Assisted Design Award 2025

About the Award

Silver A' Generative, Algorithmic, Parametric and AI-Assisted Design Award 2025

Flow received recognition with the Silver A' Generative, Algorithmic, Parametric and AI-Assisted Design Award in 2025. The A' Design Award is one of the world's most recognized design accolade that celebrates remarkable design achievement. Winning entries are identified through careful assessment by an expert jury comprising academics, professionals and press members. The Silver status reflects high caliber design work as determined by the international jury.

A' Generative, Algorithmic, Parametric and AI-Assisted Design Award

Celebrate the cutting-edge intersection of design and technology with entries that exemplify generative, algorithmic, parametric, and AI-assisted creativity. The generative award category highlights the synthesis of aesthetics and computational design techniques, showcasing innovation that redefines form, function, and user experience.

Recognizes: Algorithmic Artworks, Parametric Architectures, Generative Graphics, AI-Assisted Illustrations, Computational Sculptures, Procedural Patterns, Evolutionary Installations, Interactive Experiences and More.

More Palettes from Flow

Each image reveals a unique color story. Click to explore.

Flow - View 2
546C7D
384242
556567
415868
415054
595846
617A8C
768B99
Flow - View 3
4E91A9
3B7793
60A3B8
396479
4A8298
79B4C3
2C4451
325466
Flow - View 4
302825
1B1512
453833
5A4640
7D675F
67554D
91786D
A3857A
Flow - View 5
4D4F44
2C2A24
1C1A16
3D3C34
A7AA99
7E8474
5D6053
919685

Discover More Color Palettes

Explore colors from more award-winning designs.

Hinemosu 30
131313
282828
474747
676867
A9A9A9
808080
EEEEEE
373738
1,504,427 ID#159382
Changes and Cycles in Between
FEFEFE
2D2824
464034
575349
D1CDBC
B7BBB0
695F58
80806A
205,875 ID#170864
Life Forms of Colors
0D0807
2C1A12
402B24
553934
654A45
5D3B50
7B6558
6C4862
172,950 ID#170854
Curiosity Blocks
033A72
0B62B4
034281
0A1520
FB802E
FBC833
FBD204
1F1C03
167,973 ID#170876
Reefit
090A0D
1A1B1D
344149
7F6B65
895E4B
55595E
342E2C
4B6B78
171,241 ID#171137
Flower Forerunner Oiran
948678
473429
2D1B14
B9A28F
C8B6A8
7E746B
634F42
DBCCBE
11,597 ID#174704
As I Remember Them
638F8B
CCB776
ACBF87
4E7984
16191F
759D91
95AE8D
D19D6D
11,612 ID#176660
Algorithmic Flesh
806F55
938067
A69179
5F523B
B8A188
706047
4C4331
C9B29A
11,269 ID#177508
Shape Grammars
CDCDCD
E5E5E5
B8B8B8
9D9D9D
898989
F3F3F3
727272
010101
228,696 ID#130038
Flexo InForm
94684C
272619
3E3A28
634E32
7D7341
494A45
775D3E
5B5E64
703,824 ID#114604
Megalopolis X
E1E8F1
3B4B5E
4A5E76
9DB0D7
2A3742
5C718F
818592
121F35
990,487 ID#98037
Eden Rise
B5B6B6
ECE1D1
CCC6BF
9DA7AB
DAD2C9
4E3C37
DABB9A
332729
208,967 ID#164052