創建於 06/17/2025 12:06
Component-Based Design System
- Atomic Rose#ffb4c7
- Reusable Indigo#7161ef
- Token Clay#d6d1cb
- Style Guide Aqua#64dfdf
- Hierarchy Coal#222426
- Sketchpad Linen#fdf7f2
調色盤由 光, 黑暗的 種顏色組成. 強調色 Atomic Rose #ffb4c7 和 Style Guide Aqua #64dfdf. 調色盤有 溫暖的, 涼爽的, 中性的 色溫.
依亮度,此調色盤由 #222426(最深)到 #FDF7F2(最淺)。 亮度範圍較寬。
整體飽和度偏鮮明(彩度較高)。
有些色相成對接近互補位置——可能讀成互補對比(啟發式)。
整體色溫偏冷。
HEX 代碼(排序):#222426, #64DFDF, #7161EF, #D6D1CB, #FDF7F2, #FFB4C7
調色盤 Component-Based Design System 具有 6 程式碼顏色的組合:
十六進位: #ffb4c7, RGB: (255, 180, 199); 十六進位: #7161ef, RGB: (113, 97, 239); 十六進位: #d6d1cb, RGB: (214, 209, 203)
十六進位: #64dfdf, RGB: (100, 223, 223); 十六進位: #222426, RGB: (34, 36, 38); 十六進位: #fdf7f2, RGB: (253, 247, 242)
調色板顏色的簡化版本
色調 lightpink, 色調 mediumslateblue, 色調 lightgrey, 陰影 mediumturquoise, 陰影 黑色的, 色調 floralwhite
配色方案是由 colorscheme
調色盤中的顏色代碼
Component-Based Design System 表中顏色代碼 HEX、RGB 訊息
| 顏色 | 十六進位 | RGB | 姓名 | 備用名稱 |
| #ffb4c7 | #ffb4c7 | RGB(255, 180, 199) | Atomic Rose | — |
| #7161ef | #7161ef | RGB(113, 97, 239) | Reusable Indigo | — |
| #d6d1cb | #d6d1cb | RGB(214, 209, 203) | Token Clay | — |
| #64dfdf | #64dfdf | RGB(100, 223, 223) | Style Guide Aqua | — |
| #222426 | #222426 | RGB(34, 36, 38) | Hierarchy Coal | — |
| #fdf7f2 | #fdf7f2 | RGB(253, 247, 242) | Sketchpad Linen | — |
色彩調色板對比度
6 色彩搭配對比度過低,需要改善,這可能會影響可讀性。
| 文字顏色 | 背景顏色 | 對比 |
#ffb4c7 | #d6d1cb | 1.09 |
#ffb4c7 | #64dfdf | 1.04 |
#ffb4c7 | #fdf7f2 | 1.56 |
#d6d1cb | #64dfdf | 1.05 |
#d6d1cb | #fdf7f2 | 1.42 |
#64dfdf | #fdf7f2 | 1.5 |
圖像調色板 Component-Based Design System PNG
匯出調色盤
下載 "Component-Based Design System" 多種格式,以便無縫整合到您的設計專案中。
可用格式:
