āļŠāļēāļĢāļāļēāļāļāļąāļāđāļāļĩāļĒāļ
āļŠāļģāļŦāļĢāļąāļāđāļāļĢāļāļĩāđāļāļĒāļēāļāđāļĨāļ·āļāļāļŠāļĩāđāļāļāļēāļāļāļāļāđāļāļ UI Design āđāļŦāđāļāļāļāļĄāļēāļāļđāļāļĩ āļĄāļĩāļŠāđāļāļĨāđ āļāļāļāđāļāļāļĒāđāļāļēāļ āđāļĨāļ°āļāļāļāđāļāļāļĒāđāļāļđāđāđāļāđ āļ§āļąāļāļāļĩāđ āļāļĄāļāļ°āļĄāļēāđāļĨāđāļēāļāļķāļ Color Theory, Color Scheme, āđāļĨāļ° Color Psychology āđāļāļāļāļĢāđāļēāļ§ āđ āļāļēāļāļāļąāđāļāļāđāļāļ°āļāļēāļāļļāļāļāļāļāļīāļ Brand Identity āļāļāļāļāļēāļāļāļāļāđāļāļāļāļāļąāļāļāđāļēāļĒ āđ āđāļĨāđāļ§āđāļāđ āļāļ 60 – 30 – 10 āļĄāļēāļĨāļāļŠāļĩāđāļŦāđ UI āļāļāļāđāļĢāļēāļāļąāļ āļāđāļēāđāļāļĢāļāļĩāđāļāļģāļĨāļąāļāļāļąāļāļāļąāļāļāļēāļĢāđāļĨāļ·āļāļāđāļāđāļŠāļĩāđāļāļāļēāļ UI Design āđāļĨāđāļ§ āļāļāļāļ§āļēāļĄāļāļĩāđāļāđāļ§āļĒāļāļļāļāđāļāđāđāļāđāļāļāļāļāļāļ
Color Theory āļāļ·āļāļāļ°āđāļĢ?
Color Theory āļŦāļĢāļ·āļ āļāļĪāļĐāļāļĩāļŠāļĩ āļāļ·āļāļāļĪāļĐāļāļĩāļāļĩāđāļāļāļīāļāļēāļĒāļāļēāļĢāļāļŠāļĄāļŠāļĩāđāļĨāļ°āļāļĨāļāļĩāđāđāļāđāļāļēāļāļāļēāļĢāļāļŠāļĄāļŠāļĩāļāđāļēāļ āđ āđāļāļĒāļŠāļĩāļŠāļēāļĄāļēāļĢāļāļāļŠāļĄāđāļāđāļāļąāđāļāļŦāļĄāļ 3 āļāļąāđāļ āđāļāđāđāļāđ
- Primary Color āļŦāļĢāļ·āļ āđāļĄāđāļŠāļĩ āđāļāđāļāļŠāļĩ 3 āļŠāļĩāļāļĩāđāđāļĄāđāļŠāļēāļĄāļēāļĢāļāđāļāļīāļāļāļēāļāļāļēāļĢāļāļŠāļĄ āđāļāļāļēāļ UI Design āđāļĢāļēāļāļ°āđāļāđāđāļĄāđāļŠāļĩāļāļāļāļ§āļāļĨāđāļāļŠāļĩ RGB āļāļķāđāļāđāļāđāļāđāļĄāđāļŠāļĩāļāļāļāđāļŠāļ āđāļāđāđāļāđ āļŠāļĩāđāļāļ āļŠāļĩāđāļāļĩāļĒāļ§ āđāļĨāļ°āļŠāļĩāļāđāļģāđāļāļīāļ
- Secondary Color āļŦāļĢāļ·āļāļŠāļĩāļāļąāđāļāļāļĩāđ 2 āđāļāđāļāļŠāļĩāļāļĩāđāđāļāļīāļāļāļēāļāļāļēāļĢāļāļģāļŠāļĩ Primary Color āļĄāļēāļāļŠāļĄāļāļąāļ āđāļāđāļ āļŠāļĩāļĄāđāļ§āļ āđāļāļīāļāļāļēāļāļāļēāļĢāļāļģāļŠāļĩāđāļāļāļĄāļēāļāļŠāļĄāļāļąāļāļŠāļĩāļāđāļģāđāļāļīāļ āđāļāđāļāļāđāļ
- Tertiary colors āļŦāļĢāļ·āļāļŠāļĩāļāļąāđāļāļāļĩāđ 3 āđāļāđāļāļŠāļĩāļāļĩāđāđāļāļīāļāļāļēāļāļāļēāļĢāļāļģ Primary Color āđāļĨāļ° Secondary Color āļĄāļēāļāļŠāļĄāļāļąāļ Tertiary Color āļāļ°āļāļĒāļđāđāļĢāļ°āļŦāļ§āđāļēāļ Primary Color āđāļĨāļ° Secondary Color
āļŠāļĩāļāļąāđāļ 3 āļāļąāđāļāļāļ°āļāļĒāļđāđāļĢāļ§āļĄāļāļąāļāđāļāđāļāļ§āļāļĨāđāļāļŠāļĩ āļŦāļĢāļ·āļ Color Wheel āļāļēāļĄāļĢāļđāļāļāļąāļāļāļĩāđ

āļĢāļđāļāļ āļēāļāļāđāļēāļĒāļĄāļ·āļāļāļēāļ Sylveno āļ Wikimedia Commons
Color Scheme: āļāļąāļāļāļđāđāļŠāļĩāļĒāļąāļāđāļāđāļŦāđāļāļąāļ?
āļāļāđāļĢāļēāļĢāļđāđāđāļĨāđāļ§āļ§āđāļēāļĄāļĩāļŠāļĩāđāļāļāđāļŦāļāļāđāļēāļ āđāļĨāđāļ§āđāļĢāļēāļāļ°āļāļąāļāļāļđāđāļŠāļĩāļāļąāđāļāļŦāļĄāļāļāļĩāđāļĒāļąāļāđāļāđāļŦāđāļāļđāļāļĩāļĨāđāļ° Color Scheme āļāļ·āļāļāļļāļāļŠāļĩāļāļĩāđāļāļđāļāđāļĨāļ·āļāļāđāļŦāđāļāļąāļāļāļēāļāļĻāļīāļĨāļāļ°āļŦāļĢāļ·āļāļāļēāļāļāļāļāđāļāļāļāđāļēāļ āđ āļāļēāļĄāļāļāļāļīāđāļĨāđāļ§ Color Scheme āļāļ°āđāļāđāļŠāļĩāļāļąāđāļāđāļāđ 2 – 5 āļŠāļĩāđāļāđāļāļāđāļāđāļ āđāļāđāļāđāļāļāļāļ·āđāļ āđāļĢāļēāļĄāļē keyword āļŦāļĨāļąāļāļāļāļāļŠāļĩāļāļąāļāļāđāļāļ
- Hue āļŦāļĄāļēāļĒāļāļķāļ āļāđāļēāļŠāļĩāđāļāđāļāļĢāļīāļ āļāļĢāļēāļĻāļāļēāļāļāđāļē Tint āđāļĨāļ° Shade
- Tint āļŦāļĄāļēāļĒāļāļķāļ āļāđāļēāļāļ§āļēāļĄāļāļēāļ§āļāļāļāļŠāļĩ āļĒāļīāđāļāļāđāļē tint āļŠāļđāļ āļŠāļĩāļĒāļīāđāļāļāļđāļāļēāļ§āđāļĨāļ°āļŠāļ§āđāļēāļāļāļķāđāļ
- Shade āļŦāļĄāļēāļĒāļāļķāļ āļāđāļēāļāļ§āļēāļĄāļāļģāļāļāļāļŠāļĩ āļĒāļīāđāļāļāđāļē Shade āļŠāļđāļ āļŠāļĩāļĒāļīāđāļāļāļđāļāļģāđāļĨāļ°āļāļ·āļāļāļķāđāļ
Color Scheme āļĄāļĩāļ§āļīāļāļĩāđāļĨāļ·āļāļāļŦāļĨāļēāļĒāļĢāļđāļāđāļāļ āļĢāļđāļāđāļāļāļāļĩāđāļāļīāļĒāļĄāđāļāđāļāļąāļāļāļ°āđāļāđāđāļāđ
- Analogous: āđāļāđāļŠāļĩāļāļĩāđāļāļĒāļđāđāļāđāļēāļāļāļąāļāđāļ Color Wheel
- Monochromatic: āđāļāđāļāļāļļāļāļŠāļĩāļāļĩāđāļĄāļēāļāļēāļ Hue āļŦāļĢāļ·āļāđāļāļĩāļĒāļ§āļāļąāļ āđāļāļĒāļāļēāļĻāļąāļĒāļāļēāļĢāđāļĨāđāļĢāļ°āļāļąāļāļāđāļē Tint āđāļĨāļ° Shade āđāļāļŦāļāļķāđāļ Hue āļŠāļĢāđāļēāļāļŠāļĩāđāļāļīāđāļĄāđāļāļīāļĄ
- Complementary: āđāļāđāļŠāļĩāļāļąāđāļ§āļāļĢāļāļāđāļēāļĄ 2 āļŠāļĩāđāļāđāļ āļŠāļĩāđāļāļĩāļĒāļ§āļāļĢāļāļāđāļēāļĄāļāļąāļāļŠāļĩāļĄāđāļ§āļāļāđāļāļ
- Split Complementary: āđāļāđāļŠāļĩāļāļĩāđāļāļĒāļđāđāļāđāļēāļāļŠāļĩāļāļąāđāļ§āļāļĢāļāļāđāļēāļĄ 2 āļŠāļĩ āđāļ Color Wheel āđāļāđāļ āđāļāđāļŠāļĩāļŦāļĨāļąāļāđāļāđāļāļŠāļĩāļŠāđāļĄ āļŠāļĩāļāļĩāđāđāļāđāļ Split Complementary āļāļķāļāđāļāđāļāļŠāļĩāļāđāļģāđāļāļīāļāđāļĨāļ°āļŠāļĩāđāļāļĩāļĒāļ§ āđāļāđāļāļāđāļ

āļĢāļđāļāļ āļēāļāļāļēāļ macrovector āļ Freepik
Color Psychology: āļŠāļĩāđāļĨāļ°āļāļ§āļēāļĄāļŦāļĄāļēāļĒ
āđāļĢāļēāļĄāļēāļĨāļāļāđāļāļĩāļĒāļāļ āļēāļāļāđāļēāļĒāļāļąāđāļāļŠāļāļāļāļąāļ āđāļāđāļĨāļ°āļ āļēāļāđāļŦāđāļāļ§āļēāļĄāļĢāļđāđāļŠāļķāļāļāļ°āđāļĢāļāļąāļāļāļļāļāļāđāļēāļ

Photo by Ed Leszczynskl on Unsplash | Photo by Alex Shutin on Unsplash
āļŠāļĩāđāļāđāļĨāļ°āļŠāļĩāļāļ°āļāļģāđāļŦāđāļĄāļāļļāļĐāļĒāđāļĢāļđāđāļŠāļķāļāļāļķāļāļāļēāļĢāļĄāļāđāđāļĨāļ°āļāļĩāļāļ§āļēāļĄāļŦāļĄāļēāļĒāđāļāđāđāļāļāļāđāļēāļāļāļąāļ āļāđāļ§āļĒāļāļ§āļēāļĄāļŠāļēāļĄāļēāļĢāļāđāļāļāļēāļĢāļŠāļ·āđāļāļāļēāļĢāļĄāļāđāđāļāļĒāđāļĄāđāļāđāļāļāļāļēāļĻāļąāļĒāļāļģāļāļđāļāļāļĩāđ āļāļēāļāļāļāļāđāļāļāļāđāļēāļ āđ āļĄāļąāļāđāļāđāļŠāļĩāđāļāļ·āđāļāļŠāļ·āđāļāļŠāļēāļĢāļāļēāļĢāļĄāļāđāđāļĨāļ°āļāļļāļāļāļĢāļ°āļŠāļāļāđāļāļāļāļāļēāļāļāļāļāđāļāļ āļāļąāļ§āļāļĒāđāļēāļāļāļ§āļēāļĄāļŦāļĄāļēāļĒāļāļāļāļŠāļĩ āđāļāđāđāļāđ
- āļŠāļĩāđāļāļ: āļāļ§āļēāļĄāļĢāđāļāļāđāļĢāļ āļāļ§āļēāļĄāļĢāļąāļ āļāļąāļāļāļĢāļēāļĒ
- āļŠāļĩāļāđāļģāđāļāļīāļ: āļāļ§āļēāļĄāļŠāļāļ āļāđāļēāđāļāļ·āđāļāļāļ·āļ
- āļŠāļĩāđāļāļĩāļĒāļ§: āļāļĢāļĢāļĄāļāļēāļāļī āļāļēāļĢāđāļāļīāļāđāļ
- āļŠāļĩāļāļēāļ§: āļāļ§āļēāļĄāļāļĢāļīāļŠāļļāļāļāđ āļŠāļ°āļāļēāļ
- āļŠāļĩāļāļģ: āļĨāļķāļāļĨāļąāļ
āđāļāļāļēāļāļāļāļāđāļāļ UI āđāļĢāļēāļĄāļąāļāđāļŦāđāļāļāļēāļĢāđāļāđāļŠāļĩāđāļāļ·āđāļāđāļŠāļāļāļāļļāļāļāļĢāļ°āļŠāļāļāđāļāļāļāļāļļāđāļĄāļŦāļĢāļ·āļāļāļąāļāļāđāļāļąāđāļāļāđāļēāļ āđ āļāļąāļ§āļāļĒāđāļēāļāļāļĩāđāđāļŦāđāļāļāļąāļāļāļĩāđāļŠāļļāļāļāļ·āļ āļāļēāļĢāđāļāđāļŠāļĩāđāļāļāđāļāļ·āđāļāļŠāļ·āđāļāļ§āđāļēāļāļļāđāļĄāļŦāļĢāļ·āļāļāļēāļĢāļāļĢāļ°āļāļģāļāļąāđāļ āđ āļāļ°āđāļāđāļ Destructive Action (āđāļĄāļ·āđāļāđāļāļīāļ action āđāļĨāđāļ§āļāļ°āđāļĄāđāļŠāļēāļĄāļēāļĢāļāļĒāđāļāļāļāļĨāļąāļāļŦāļĢāļ·āļāļāļđāđāļāđāļāļĄāļđāļĨāļāļ·āļāđāļāđ) āđāļāļ·āđāļāļāļāļēāļāļŠāļĩāđāļāļāđāļāđāļāļŠāļĩāļāļĩāđāļāļķāļāļāļ§āļēāļĄāļŠāļāđāļāļāļđāđāđāļāđāđāļāđāļāļĩāļāļĩāđāļŠāļļāļ āđāļĨāļ°āļĒāļąāļāļŠāļ·āđāļāļāļķāļāļāļąāļāļāļĢāļēāļĒāļāļāļ action āļāļąāđāļ āđ āļāļĩāļāļāđāļ§āļĒ

āļāļąāđāļāļāļĩāđ Nielson Norman Group āļāļĢāļīāļĐāļąāļ Consultant āļāđāļēāļ User Experience āļāļāļāļāđāļĄāļĢāļīāļāļēāđāļāđāđāļāļ°āļāļģāļ§āđāļē āđāļĄāđāļŠāļĩāļāļēāļāļāļ°āļĄāļĩāļāļ§āļēāļĄāļŦāļĄāļēāļĒāļŠāļēāļāļĨāļāļĒāļđāđāđāļĨāđāļ§āļāđāļāļēāļĄ (āđāļāđāļ āļŠāļĩāđāļāļāļŠāļģāļŦāļĢāļąāļāļŦāļĒāļļāļ āļŦāļĢāļ·āļāļŠāļĩāđāļāļĩāļĒāļ§āļŠāļģāļŦāļĢāļąāļāđāļāļīāļāļŦāļāđāļē) āđāļāđāļŠāļĩāļāđāļŠāļēāļĄāļēāļĢāļāļĄāļĩāļāļ§āļēāļĄāļŦāļĄāļēāļĒāđāļāļāļāđāļēāļāļāļąāļāļāļēāļĄāļ§āļąāļāļāļāļĢāļĢāļĄāļāļāļāđāļāđāļāļ·āđāļāļāļĩāđāļāļĩāļāļāđāļ§āļĒ āđāļāđāļ āļŠāļĩāļāļāļāđāļāļīāļāļāļĢāļēāđāļāļāļĩāļāđāļāđāļāļŠāļĩāđāļāļ āđāļāđāđāļāļāđāļĄāļĢāļīāļāļēāļāļ°āđāļāđāļāļŠāļĩāđāļāļĩāļĒāļ§ āđāļāđāļāļāđāļ (Gordon, 2021) āļāļąāļāļāļąāđāļ āđāļ§āļĨāļēāđāļĢāļēāđāļĨāļ·āļāļāļŠāļĩ āđāļĢāļēāļāđāļāļāļāļģāļāļķāļāļāļķāļāļāļ§āļēāļĄāļŦāļĄāļēāļĒāļŠāļēāļāļĨ āđāļĨāļ°āļāļ§āļēāļĄāļŦāļĄāļēāļĒāđāļāļāļēāļ°āļ§āļąāļāļāļāļĢāļĢāļĄāļāļĩāļāļāđāļ§āļĒ
āđāļĨāļ·āļāļāļŠāļĩāļĒāļąāļāđāļāđāļŦāđāļāļāļāđāļāļāļĒāđ?
āđāļāļĒāļāļĢāļāļāļīāđāļĨāđāļ§ āļāļāļāđāļāļĢāļŦāļĢāļ·āļāļāļđāđāļ§āđāļēāļāđāļēāļāļāļ°āļĄāļĩ Brand Identity āļāđāļāļāļāļĒāļđāđāđāļĨāđāļ§ āđāļāļāļĢāļāļĩāļāļĩāđ āđāļĢāļēāļŠāļēāļĄāļēāļĢāļāđāļĨāļ·āļāļāļŠāļĩāļāļēāļ Brand Identity āđāļĨāđāļ§āļāļĢāļąāļāļŦāļĢāļ·āļāđāļāļīāđāļĄāđāļŦāđāđāļāđāļēāļāļąāļāļāļēāļāļāļāļāđāļāļ UI āđāļāđāđāļĨāļĒ āđāļāđāļŦāļēāļāļāļāļāđāļāļĢāđāļāļāđāļāļāļāļēāļĢ rebrand āļŠāļĩāđāļŦāļĄāđ āļŦāļĢāļ·āļāļāđāļāļāđāļĨāļ·āļāļāļŠāļĩāļāļēāļāļĻāļđāļāļĒāđ Nielson Norman Group (Gordon, 2021) āđāļāđāđāļāļ°āļāļģāđāļāļ§āļāļēāļāđāļĨāļ·āļāļāļāļļāļāļŠāļĩ āļŦāļĢāļ·āļ Color Palette āđāļāđāļāđāļāļąāļāļāļēāļāļāļāļāđāļāļāđāļ§āđāļāļąāļāļāļĩāđ
- āđāļĨāļ·āļāļ Color Scheme āđāļĨāđāļ§āļ§āļīāđāļāļĢāļēāļ°āļŦāđ: āļŦāļēāļāļĒāļąāļāđāļāđāļāļĄāļ·āļāđāļŦāļĄāđ āļāļ§āļĢāđāļĨāļ·āļāļāđāļāđ Monochromatic āļāđāļāļ āđāļāļ·āđāļāļāļāļēāļāđāļāđāļ Color scheme āļāļĩāđāļāļģāđāļāđāļāļāļēāļāļāļāļāđāļāļāđāļāđāļāđāļēāļĒ āļāļāđāļĨāļ·āļāļ Scheme āđāļŠāļĢāđāļ āđāļŦāđāļĨāļāļāļŠāļļāđāļĄāđāļĨāļ·āļāļāļŠāļĩāļāļĩāđāđāļāļĨāđāđāļāļĩāļĒāļāļāļąāļāļāļ§āļēāļĄāļĢāļđāđāļŠāļķāļāļāļĩāđāđāļĢāļēāļāļĒāļēāļāļŠāļ·āđāļāļŠāļēāļĢāđāļāđāļŠāļēāļāļēāļĢāļāļ° āđāļĨāđāļ§āļ§āļīāđāļāļĢāļēāļ°āļŦāđāđāļŦāļāļļāļāļĨāļāļĩāđāđāļĨāļ·āļāļāļŠāļĩāļāļąāļāļāļĨāđāļēāļ§āđāļāđāļ āļāļāļāđāļāļĢāļēāļ°āļāļ°āđāļĢ āļāļāļāđāļāļāļĒāđāļĒāļąāļāđāļ āđāļāļāļąāđāļāļāļāļāļāļĩāđāđāļĢāļēāļŠāļēāļĄāļēāļĢāļāđāļāđāđāļ§āđāļāđāļāļāđāļāļĒāđāļēāļ Realtime Colors āļŦāļĢāļ·āļ Coolors āđāļŦāđāļāđāļ§āļĒ generate āļŠāļĩāđāļāđ
- āļāļģāļŦāļāļāļāļļāļāļŠāļĩ 3 āļŠāļĩ: āđāļĨāļ·āļāļāļŠāļĩāļāļĩāđāđāļāđāļēāļāļąāļ Color Scheme āđāļĨāđāļ§āļāļģāļŦāļāļāļāļļāļāļŠāļĩāđāļ§āđāđāļāļĩāļĒāļ 3 āđāļāđāļēāļāļąāđāļ āđāļāļ·āđāļāđāļŦāđāļāļēāļāļāļāļāđāļāļāļĄāļĩāļŠāļĩ 3 āļŠāļĩāļāļĩāđāļāļąāļāđāļāļ āđāļĨāļ°āđāļĄāđāļāļđāļāļŠāļĩāļāļ·āđāļ āđ āļāļĨāļ·āļ
- āđāļĨāļ·āļāļāļŠāļĩāļāļēāļĄ Brand’s Color Guideline: āđāļĨāļ·āļāļāļŠāļĩāđāļŦāđāđāļāđāļēāļāļąāļāļāļāļāđāļāļĢāļāļĩāđāđāļĢāļēāļāļāļāđāļāļāļāļēāļāđāļŦāđ āļāļāļāļāļēāļāļāļ°āļāđāļ§āļĒāđāļŦāđāļāļēāļĢāđāļĨāļ·āļāļāļŠāļĩāļāđāļēāļĒāļāļķāđāļāđāļĨāđāļ§ āļĒāļąāļāļāđāļ§āļĒāđāļŦāđāļāļēāļāļāļāļāđāļāļāļĄāļĩ Brand Experience āļāļĩāđāļāļąāļāđāļāļ āļāđāļ§āļĒāđāļŦāđāļāļđāđāđāļāđāļāļēāļāļāļāļāļģāđāļāļĢāļāļāđāđāļāđāļāļĩāļāļķāđāļāļāļĩāļāļāđāļ§āļĒ
āļāļĩāļāļĩāđ āđāļĨāļ·āļāļāļŠāļĩāļāļ·āđāļāļŦāļĨāļąāļāļāļĩāđāļāļđāļāđāļēāļĒāđāļĨāļ°āļāļąāļāļāļąāļāļŠāļĩāļāđāļāļāļ§āļēāļĄ āļŦāļēāļāđāļāđāļāļĄāļ·āļāđāļŦāļĄāđ āļāļ§āļĢāđāļāđāļŠāļĩāļāļ·āđāļāļŦāļĨāļąāļāđāļāđāļāļŠāļĩāļāļēāļ§āļāđāļāļ āđāļāļ·āđāļāļāļāļēāļāļŠāļĩāļāļ·āđāļāļŦāļĨāļąāļāļŠāļēāļĄāļēāļĢāļāļāļķāļāļāļļāļāđāļāļāļąāļŠāļāļāļāļāļđāđāđāļāđāļāļāļāļāļēāļāļāļļāļāļāļĩāđāļāļ§āļĢāđāļāļāļąāļŠ āđāļĨāļ°āļŠāļĩāļāđāļāļāļ§āļēāļĄāļāļ§āļĢāļāļąāļāļāļąāļāļŠāļĩāļāļ·āđāļāļŦāļĨāļąāļāđāļāđāļ āļŠāļĩāļāļģ āđāļāļ·āđāļāđāļŦāđāļāļđāđāđāļāđāđāļŦāđāļāļāđāļāļāļ§āļēāļĄāđāļāđāļāļąāļāđāļāļ āđāļĄāđāļāļĨāļ·āļāļāļąāļāļāļ·āđāļāļŦāļĨāļąāļāđāļāļīāļāđāļ
āļāļąāļ§āļāļĒāđāļēāļāđāļ§āđāļāđāļāļāđ: Bettersleep āđāļāđ Monochromatic Scheme āđāļĨāđ shade āļŠāļĩāļāđāļģāđāļāļīāļ āđāļāļ·āđāļāđāļĨāļĩāļĒāļāđāļāļāļāļĢāļĢāļĒāļēāļāļēāļĻāļāļāļāļāļĨāļēāļāļāļ·āļ āđāļĨāļ°āļŠāļĢāđāļēāļāļāļ§āļēāļĄāļāđāļāļāļāļĨāļēāļĒāđāļāđāļāļđāđāđāļāđāļēāļāļĄ

āđāļŦāļĨāđāļāļāļĩāđāļĄāļē : bettersleep
āđāļŠāđāļŠāļĩāđāļŦāđ UI āļāđāļ§āļĒāļāļ 60 – 30 – 10
āļŦāļĨāļąāļāļāļēāļāđāļĨāļ·āļāļāļŠāļĩāđāļŠāļĢāđāļāđāļĨāđāļ§ āļāđāđāļāđāđāļ§āļĨāļēāļāļģāļŠāļĩāđāļāđāļāđāļāļąāļ UI Design āļāļąāļāļŠāļąāļāļāļĩ āđāļāļāļąāđāļāļāļāļāļāļĩāđ āđāļāđāļŠāļĩāļāļēāļĄāļŠāļąāļāļŠāđāļ§āļāļāļāļ āļāļ 60 – 30 – 10 āļāļķāđāļāđāļāđāđāļāļīāļĄāđāļāđāļāļāļāļŠāļąāļāļŠāđāļ§āļāļŠāļĩāļāļāļāļĄāļąāļāļāļāļĻāļīāļĨāļāđ āđāļĨāļ°āđāļāđāļāļģāļĄāļēāļāļĢāļąāļāđāļāđāļāļąāļāļāļēāļ UI Design āđāļāļ·āđāļāđāļŦāđāļŠāļąāļāļŠāđāļ§āļāļāļēāļĢāđāļāđāļŠāļĩāđāļ UI āļŠāļĄāļāļļāļĨāđāļĨāļ°āļāđāļēāļāļāđāļēāļĒ
- 60% āđāļĢāļāļāļ°āđāļāđāļāļŠāļĩāļŦāļĨāļąāļ (Primary Color) āļāļāļ UI āļŠāļĩāļāļĩāđāđāļāđāļāļŠāļĩāļāļĩāđāļāļđāđāđāļāđāđāļŦāđāļāđāļĒāļāļ°āļāļĩāđāļŠāļļāļāđāļāđāļ§āđāļāđāļāļāđ āļĄāļąāļāđāļāđāļāļŠāļĩāļāļĨāļēāļāđāļĨāļ°āđāļāđāļāļąāļāļāļ·āđāļāļŦāļĨāļąāļāđāļāđāļāļŦāļĨāļąāļ
- 30% āļāđāļāļĄāļēāļāļ°āđāļāđāļāļŠāļĩāļĢāļāļ (Secondary Color) āļāļāļ UI āđāļāđāđāļāđāļāļŠāļĩāđāļŠāļĢāļīāļĄāļāļĩāđāļāļąāļāļāļąāļāļāļ·āđāļāļŦāļĨāļąāļāđāļāļ·āđāļāđāļŦāđ UI āļĄāļĩāđāļāļāļĨāļąāļāļĐāļāđāļĄāļēāļāļāļķāđāļ āđāļāđāđāļ āļāđāļāļāļ§āļēāļĄāļŦāļĢāļ·āļ icon āļāđāļēāļ āđ āļāļĩāđāđāļĄāđāļāđāļāļāļāļēāļĢāđāļŦāđāđāļāđāļāļāļļāļāļĢāļ§āļĄāļāļāļāļŠāļēāļĒāļāļē
- 10% āļŠāļļāļāļāđāļēāļĒāļāļ°āđāļāđāļāļŠāļĩāļāļąāļ (Accent Color) āļāļāļ UI āļŠāļĩāļŠāđāļ§āļāļāļĩāđāļāđāļāļāđāļāđāļāļŠāļĩāļāļĩāđāđāļāļāđāļāđāļāļĄāļēāļāļāļĩāđāļŠāļļāļ āđāļāļ·āđāļāļāļķāļāļŠāļēāļĒāļāļēāļāļđāđāđāļāđāđāļāđāļēāļŦāļē element āļāļąāđāļ āđ āļĄāļąāļāđāļāđāļāļąāļāļāļļāđāļĄ āđāļĨāļ° Call to Action
āļŦāļĨāļąāļāļāļēāļāļĨāļāļŠāļĩāđāļŠāļĢāđāļ āļāļĒāđāļēāļĨāļ·āļĄāļāļĢāļ§āļāļŠāļāļāļāļēāļĢāđāļāđāļŠāļĩāđāļ UI āļāđāļ§āļĒāļ§āđāļēāļŠāļĩāļāļĩāđāđāļāđāđāļāļāļāļāļāļĩāđ āļāļāļāđāļāļāļĒāđāļāļļāļāļāļĢāļ°āļŠāļāļāđāļāļāļ element āļāļąāđāļ āđāļŦāļĢāļ·āļāđāļĄāđ āđāļĨāđāļ§āļāļģ UI Design āļāļĩāđāđāļāđāđāļāļāļāļŠāļāļāļāļąāļāļāļđāđāđāļāđāđāļāļ·āđāļāđāļāđāļ Feedback āđāļĨāļ°āđāļāđāđāļāđāļāļāļāļēāļāļāļāđāļāđāļ
āļāļąāļ§āļāļĒāđāļēāļ: Book Swap āđāļāļāđāļĨāļāđāļāļĨāļ·āđāļĒāļāļŦāļāļąāļāļŠāļ·āļ āđāļāđāļŠāļĩāļāļēāļ§ (#FFFFFF) āđāļāđāļāļŠāļĩ 60% āđāļāđāļŠāļĩāļāđāļģāļāļēāļĨāđāļāđāļĄ (#252127) āđāļāđāļāļŠāļĩ 30% āđāļĨāļ°āđāļāđāļŠāļĩāđāļŦāļĨāļ·āļāļāļāļāļ (#948E75) āđāļāđāļāļŠāļĩ 10%

āļŠāļĢāļļāļ
āļāļēāļĢāđāļāđ Color Theory āđāļāļāļēāļĢāļāļāļāđāļāļ UI Design āļāđāļāļāļāļēāļĻāļąāļĒāļāļ§āļēāļĄāđāļāđāļēāđāļāđāļāļĩāđāļĒāļ§āļāļąāļāļāļĪāļĐāļāļĩāļāļēāļĢāļāļŠāļĄāļŠāļĩ āļāļēāļĢāļāļąāļāļāļđāđāļŠāļĩ āļĢāļ§āļĄāļāļķāļāļāļīāļāļ§āļīāļāļĒāļēāđāļĨāļ°āļāļ§āļēāļĄāļŦāļĄāļēāļĒāļāļāļāļŠāļĩ āđāļāļ·āđāļāđāļŦāđāļāļąāļāļāļāļāđāļāļāļŠāļēāļĄāļēāļĢāļāđāļĨāļ·āļāļāđāļāđāļŠāļĩāđāļāđāļāļĢāļāļāļēāļĄāļŠāļīāđāļāļāļĩāđāļāļēāļāļāļāļāđāļāļ UI āļāđāļāļāļāļēāļĢāļŠāļ·āđāļāļŠāļēāļĢāđāļāđāļāļđāđāđāļāđāļāļēāļ āļŦāļēāļāļāļąāļāļāļāļāđāļāļāļāļąāļāđāļĨāļ·āļāļāļŠāļĩāļāļāļāļĄāļēāļāļĩ āļāļĢāđāļāļĄāļāļąāļāđāļāđāļŠāļĩāļāļēāļĄāļŠāļąāļāļŠāđāļ§āļāļŠāļĩāļāļēāļĄāļāļ 60 – 30 – 10 āļāļēāļāļāļāļāđāļāļ UI āļāļąāļāļāļĨāđāļēāļ§āļĒāđāļāļĄāļāļāļāļĄāļēāļāļđāļāļĩāđāļĨāļ°āļāļāļāđāļāļāļĒāđāļāļēāļĢāđāļāđāļāļēāļāļāļĒāđāļēāļāđāļāđāļāļāļ
āļāđāļēāļāļāļīāļ
Cherry, K. C. (2022). Color psychology: Does it affect how you feel? Verywell Mind. https://www.verywellmind.com/color-psychology-2795824
Gordon, K. (2021, June 6). Using color to enhance your design. Nielsen Norman Group. Retrieved October 13, 2023, from https://www.nngroup.com/articles/color-enhance-design/
Itsadmin. (2021, March 26). Hue, Tint, Tone, and Shade â Whatâs the difference? – Integrity Painting & Decorating Winnipeg. Integrity Painting & Decorating Winnipeg. https://integritypainting.ca/hue-tint-tone-and-shade-whats-the-difference-2/
Olohijere, I. F. (2023). What is the 60-30-10 Rule in Design? And How to Use it in Your Projects. freeCodeCamp.org. https://www.freecodecamp.org/news/the-60-30-10-rule-in-design/