Loading...
Created at 07/07/2025 17:13
Cognitive Design Pattern Toolkit
- Persona Shell#faf0e6
- Usability Blue#4a90e2
- Cognitive Load Yellow#fff176
- Information Scent Gray#bdbdbd
- Affordance Coral#ff8a65
- Memory Recall Black#0d0d0d
The palette consists of Light, Dark colors. Accent colors Usability Blue #4a90e2 and Cognitive Load Yellow #fff176. Palette has Neutral, Cool, Warm colors temperature.
By lightness, this palette runs from #0D0D0D (darkest) to #FAF0E6 (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 warm.
HEX codes (sorted): #0D0D0D, #4A90E2, #BDBDBD, #FAF0E6, #FF8A65, #FFF176
Palette Cognitive Design Pattern Toolkit has combination of 6 codes colors:
HEX: #faf0e6, RGB: (250, 240, 230); HEX: #4a90e2, RGB: (74, 144, 226); HEX: #fff176, RGB: (255, 241, 118)
HEX: #bdbdbd, RGB: (189, 189, 189); HEX: #ff8a65, RGB: (255, 138, 101); HEX: #0d0d0d, RGB: (13, 13, 13)
Simplified version of palette colors
Shade of dodgerblue, Shade of Khaki, Tint of Silver, Shade of coral, Shade of Black
Color scheme was created by hex
Colors codes in palette
Cognitive Design Pattern Toolkit color codes HEX, RGB information in table
| Color | HEX | RGB | Name | Alternative name |
| #faf0e6 | #faf0e6 | RGB(250, 240, 230) | Persona Shell | Linen |
| #4a90e2 | #4a90e2 | RGB(74, 144, 226) | Usability Blue | — |
| #fff176 | #fff176 | RGB(255, 241, 118) | Cognitive Load Yellow | — |
| #bdbdbd | #bdbdbd | RGB(189, 189, 189) | Information Scent Gray | Gray74 |
| #ff8a65 | #ff8a65 | RGB(255, 138, 101) | Affordance Coral | — |
| #0d0d0d | #0d0d0d | RGB(13, 13, 13) | Memory Recall Black | Gray5 |
Color Palette Contrast
7 color pairs have low contrast and need improvement which may impact readability.
| Text Color | Background Color | Contrast Ratio |
#faf0e6 | #fff176 | 1.03 |
#faf0e6 | #bdbdbd | 1.67 |
#4a90e2 | #bdbdbd | 1.75 |
#4a90e2 | #ff8a65 | 1.42 |
#fff176 | #bdbdbd | 1.61 |
#fff176 | #ff8a65 | 1.99 |
Image palette Cognitive Design Pattern Toolkit png
Export Palette
Download the "Cognitive Design Pattern Toolkit" in multiple formats for seamless integration into your design projects.
Available formats: