Tutorials
erikdkennedyThe HSB Color System: A Practitioner's Primer
The HSB Color System: A Practitioner's Primer
Hue, saturation, and brightness, explained · Color variations with hue · Adjusting visibility with saturation · Black vs. white · HSL vs HSB
erikdkennedy
- erikdkennedyColor in UI Design: A (Practical) Framework- Why Color Theory Sucks (& what framework to use instead)
Color in UI Design: A (Practical) Framework
The importance of color variations · Darker vs. lighter variations · Analyzing the real world · The Rules (in HSB) · Luminosity · The Way of Color
erikdkennedy
adamwathanBuilding Your Color Palette - Refactoring UI
Building Your Color Palette - Refactoring UI
Learn how to design awesome UIs by yourself using specific tactics explained from a developer's point-of-view.
adamwathan
Tools
Tailwind CSS Color Generator | UI Colors
Tailwind CSS Color Generator | UI Colors
Generate, edit, save and share Tailwind CSS color shades based on a given hexcode or HSL color.
Color Palette App | BairesDevColor Palette App | BairesDev
The definite color palette editing and remapping tool.
Coolors.coCoolors - The super fast color palettes generator!
Coolors - The super fast color palettes generator!
Generate or browse beautiful color combinations for your designs.
Coolors.co
Practice
我使用了我拍的一张照片在 色輪、調色盤產生器 | Adobe Color 中提取色调，然后对某些色票进行了修改，然后作为我网页的颜色主题。
<div style="display: flex; width: 100%;"> <div class="color-block" style="background-color: #5891D6; width: 11%; padding-bottom: 9%; margin: 0 1%; position: relative; border-radius: 5px;" data-color="#5891D6"></div> <div class="color-block" style="background-color: #72A6E2; width: 11%; padding-bottom: 9%; margin: 0 1%; position: relative; border-radius: 5px;" data-color="#72A6E2"></div> <div class="color-block" style="background-color: #83B2E8; width: 11%; padding-bottom: 9%; margin: 0 1%; position: relative; border-radius: 5px;" data-color="#83B2E8"></div> <div class="color-block" style="background-color: #9CC3EE; width: 11%; padding-bottom: 9%; margin: 0 1%; position: relative; border-radius: 5px;" data-color="#9CC3EE"></div> <div class="color-block" style="background-color: #B4CFEC; width: 11%; padding-bottom: 9%; margin: 0 1%; position: relative; border-radius: 5px;" data-color="#B4CFEC"></div> <div class="color-block" style="background-color: #C7D6EB; width: 11%; padding-bottom: 9%; margin: 0 1%; position: relative; border-radius: 5px;" data-color="#C7D6EB"></div> <div class="color-block" style="background-color: #D0DDF2; width: 11%; padding-bottom: 9%; margin: 0 1%; position: relative; border-radius: 5px;" data-color="#D0DDF2"></div> <div class="color-block" style="background-color: #E1E8FA; width: 11%; padding-bottom: 9%; margin: 0 1%; position: relative; border-radius: 5px;" data-color="#E1E8FA"></div> <div class="color-block" style="background-color: #EBF0FF; width: 11%; padding-bottom: 9%; margin: 0 1%; position: relative; border-radius: 5px;" data-color="#EBF0FF"></div> </div> <div style="display: flex; width: 100%; margin-top:10px"> <div class="color-block" style="background-color: #0C1A34; width: 11%; padding-bottom: 9%; margin: 0 1%; position: relative; border-radius: 5px;" data-color="#0C1A34"></div> <div class="color-block" style="background-color: #0E223D; width: 11%; padding-bottom: 9%; margin: 0 1%; position: relative; border-radius: 5px;" data-color="#0E223D"></div> <div class="color-block" style="background-color: #192E49; width: 11%; padding-bottom: 9%; margin: 0 1%; position: relative; border-radius: 5px;" data-color="#192E49"></div> <div class="color-block" style="background-color: #42516E; width: 11%; padding-bottom: 9%; margin: 0 1%; position: relative; border-radius: 5px;" data-color="#42516E"></div> <div class="color-block" style="background-color: #616B84; width: 11%; padding-bottom: 9%; margin: 0 1%; position: relative; border-radius: 5px;" data-color="#616B84"></div> <div class="color-block" style="background-color: #83889E; width: 11%; padding-bottom: 9%; margin: 0 1%; position: relative; border-radius: 5px;" data-color="#83889E"></div> <div class="color-block" style="background-color: #A0AAC5; width: 11%; padding-bottom: 9%; margin: 0 1%; position: relative; border-radius: 5px;" data-color="#A0AAC5"></div> <div class="color-block" style="background-color: #C8CFDF; width: 11%; padding-bottom: 9%; margin: 0 1%; position: relative; border-radius: 5px;" data-color="#C8CFDF"></div> <div class="color-block" style="background-color: #EBF0FF; width: 11%; padding-bottom: 9%; margin: 0 1%; position: relative; border-radius: 5px;" data-color="#EBF0FF"></div> </div>