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. 第 1 章 JS变量、作用域

    目录 一. 判断变量类型 二.作用域 和 上下文 1. 作用链 2. 上下文(this) 二.JS的解析机制 1. 预解析 三.垃圾收集 内存管理销毁 @(es5) 基本类型 引用类型 一. 判断变量 ...

  2. python numpy库的基本内容

    import numpy as np np.getfromtxt("路径",delimiter = "," ,dtype = str)  #读取txt文件数据 ...

  3. python学习笔记1-基础知识

    # 0.输入输出 # print数值型直接输出计算结果 pirnt( + ) # 输出 + = # input输入(可在括号内加提示语句) name = input('please enter you ...

  4. 聚合函数对NULL统计

    Table ID Amount Number 1 28.26 NULL 2 NULL NULL 3 NULL NULL SQL SELECT SUM(Amount),SUM(Number),COUNT ...

  5. np.mgrid 用法

    import numpy as np dtype=np.float32 num_anchors = 6 y, x = np.mgrid[0:4, 0:4] print(y) print(x) y = ...

  6. NodeMan架构

    在上一篇文章中我们介绍了NodeMan的基本概念,介绍了这是一套利用NodeJs框架来管理Ubuntu服务器的解决方案,接下来我们会继续介绍关于这样一套解决方案更多细节的内容. 后台: 使用node作 ...

  7. JavaScript监控页面input输入整数且只能输入2位小数

    <input type="text" id="money" /> <script> $(function () { $('#money' ...

  8. 北京大学Cousera学习笔记--5-计算导论与C语言基础--计算机的基本原理-设计程序

    只要你认真的思考,你就会发现这个世界是如此的简单,正如我们想象的一样,正因为如此,我们的思考才更加的有价值 1.单词:关键字(有特定含义的):其他词用关键字定义出来 2.数和计算符号:数据类型+运算符 ...

  9. org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'multipartResolver': Failed to introspect bean class [org.springframework.web.multipart.commons.CommonsMultipartR

    在用spring mvc 做文件上传的时候出现了这个问题(能看到这篇文章就说明你已经有了那两个包了) 错误:org.springframework.beans.factory.BeanCreation ...

  10. 【Python学习】yield send我就说这么多

    C#的yield已经忘得差不多了.又遇到python的yield.iterator def testYield(): print 'yield1' m = yield 1 print 'm =' , ...