Notes: I'm not a designer. This is what i've self-learnt over the years because i couldn't afford good designers. I don't know if this is scientific. This works for me. I hope it works for you.

I think you already know that a color is represented by a 6 digit code (hex code) containing any permutation of the the six alphabets a,b,c,d,e,f and the ten digits 0,1,2,3,4,5,6,7,8,9. The hex codes i use and describe here are the ones i chanced upon over the years. They are easy to remember and i don't need to keep referring to any color picker tool.

For any app, you will need colors for ...

  1. Main Theme Color(s)

  2. Text

  3. Backgrounds, Boxes, Lines

1. Main Theme Color

Remember VIBGYOR (Violet, Indigo, Blue, Green, Yellow, Orange, Red) from school days? You can generate a nice VIBGYOR palette using a permutation of just four codes c, f, 6, 9 ... like so ...

Violet, Indigo, Blue, Green // colorhunt.co/palette/143721
Yellow, Orange, Another Orange, Red // colorhunt.co/palette/143722

The colors above are the softer side of their darker variants. The darker colors (for example the darkest red is ff000) are harsh on the eyes and are best avoided.

Prefer soft pastel colors instead? Just remember a,b,c,d,e,f. Using a permutation of these six codes (abcdef, bafedc, etc.) you can generate many soft pastel colors ... like below ...

Just A-B-C-D-E-F // colorhunt.co/palette/143809
2. Text

Text is usually dark (blacks). Here also i tend to avoid the darkest darks (full black is 000000). I like the colors below because they give me a nice dark blue tint. The codes are also easy to remember. 1a2a3a is darker and you can go all the way to 7a8a9a which is lighter.

Text Colors // colorhunt.co/palette/143727
3. Backgrounds, Boxes, Lines

These are usually grays (or 'greys' if you insist). Mostly used for backgrounds, table header or table row colors, lines, and, occasionally for text. These hex codes are the easiest to remember.

Grays // colorhunt.co/palette/143728

That's all there is. Once you get a hang of this it becomes easy to play around and arrive at colors that you like better than what are presented here. I recommend https://colorhunt.co/.

---- Quick Links ----

V I B G : https://colorhunt.co/palette/143721 Y O O R : https://colorhunt.co/palette/143722 TEXT : https://colorhunt.co/palette/143727 GREYS : https://colorhunt.co/palette/143728 ABCDEF : https://colorhunt.co/palette/143809

 
 
 

Easy to Remember Color Guide for Non-Designers的更多相关文章

  1. Frontend Development

    原文链接: https://github.com/dypsilon/frontend-dev-bookmarks Frontend Development Looking for something ...

  2. 20款 JavaScript 开发框架推荐给前端开发者

    下面,我们给大家提供了一个用于 HTML5 开发的各种用途的 JavaScript 库列表.这些框架能够给前端开发人员提供更好的功能实现的解决方案.如果你有收藏优秀的框架,也可以在后面的评论中分享给我 ...

  3. PS网页设计教程XXV——使用Photoshop设计的老式组合布局

    作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...

  4. OBD Experts OBD II Software OBD II Protocol Stack

    http://www.obdexperts.co.uk/stack.html OBD II Software OBD Experts can provide you with ready to use ...

  5. 40 JavaScript Chart and Graph Libraries for Developers--reference

    reference:http://www.egrappler.com/javascript-chart-and-graph-libraries-for-developers/ BY TEAMEGRAP ...

  6. Fully Update And Upgrade Offline Debian-based Systems

    Let us say, you have a system (Windows or Linux) with high-speed Internet connection at work and a D ...

  7. jQuery $.extend()使用方法

    $.extend()使用方法总结. jQuery为开发插件提拱了两个方法,各自是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.ex ...

  8. [翻译] MAThemeKit

    MAThemeKit https://github.com/mamaral/MAThemeKit MAThemeKit provides iOS developers the ability to c ...

  9. Kids Store - OpenCart 自适应主题模板 ABC-0022

    KIDS STORE - OPENCART 自适应主题模板 ABC-0022 FEATURES Get FREE Lifetime Updates Get FREE On-Going Support ...

随机推荐

  1. SCRIPT438: 对象不支持“indexOf”属性或方法

    SCRIPT438: 对象不支持“indexOf”属性或方法 indexOf()的用法:返回字符中indexof(string)中字串string在父串中首次出现的位置,从0开始!没有返回-1:方便判 ...

  2. 魔方---java

    package LMS; import java.awt.AWTException;import java.awt.Robot;import java.awt.event.InputEvent;imp ...

  3. 记录一个bootstrap惨痛的错误

    记录一个bootstrap的错误,这个错误因为我删除了一个class就导致了页面上显示的错误,这是一个惨痛的教训,特此记录,提醒自己在做前端的修改时,一定要慎之又慎.如果真的要做改动,改完之后也要测一 ...

  4. hystrix参数使用方法

    hystrix+feign+ribbon,但是可能很多人都知道hystrix还有线程隔离,信号量隔离,等等各种参数配置,在这几就记录下hystrix的参数, 一.hystrix参数使用方法 通过注解@ ...

  5. 怎么eclipse或MyEclipse中添加javaSe的源码

    怎么eclipse或MyEclipse中添加javaSe的源码 有时在eclipse里我们调用java提供给我们的方法,我们有时需要查看java提供给我们的调用方法的源码或java提供给我们的核心类的 ...

  6. jenkins centos slave起不来报错The SSH key presented by the remote host does not match the key saved in the Known Hosts file against this host. Connections to this host will be denied until the two keys mat

    场景:我的centos-204是一台centos的机器,本来用https://www.cnblogs.com/zndxall/p/8297356.html 的centos slave方式搭建ok的,一 ...

  7. VS2017 + EF6连接MySql

    VS2017 + EF6连接MySql   原地址:https://blog.csdn.net/mzhifa/article/details/80999105 VS2017 + EF6连接MySql ...

  8. CDI services--Event(事件)

    Cdi中的event事件,是整个CDI的精华所在之一.其有点类似设计模式中的观察者模式.但也有不同的地方.如下3点: 不仅是生产者(producers)从观察者(observers)解耦.观察者也从生 ...

  9. spring IOC 分析及实现

    什么是IOC Inversion of Control,控制反转,也成依赖倒置. 反转: 依赖对象的创建被反转,使用IOC之前,对象由自己创建,反转后,由IOC容器获取 IOC容器的工作: 负责创建, ...

  10. redis----------linux和mac如何安装redis和启动,关闭

    1.打开官网https://redis.io/download.官网有安装命令 2.以下是我的执行过程截图 执行完官网给的命令以后,再执行  make PREFIX=/usr/local/redis ...