QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Generating Random Color’s In JavaScript

Generating Random Color’s In JavaScript

random-color

Many developers use random color generation to provide a awesome looking UI to their websites. For generating random color codes using JavaScript you need to learn basics of color theory and maths. In this post I will be explaining color theory, basic math functions and random color generating methods.


Introduction to RGB color theory

Every color pixel is made up of three major color’s: red, green and blue. Different intensity(amount) of these three color’s per pixel produce different range of color’s per pixel. Red, green and blue are called primary colors.

The total number of colors supported by a computer(or monitor) depends on the number of bytes allocated to each of primary colors.

8 bit color system
In 8 bit color systems each primary color can have a intensity range of 0 to 255. Therefore producing 256*256*256 i.e., 16777216 different colors.

16 bit color systems
Similarly we can calculate for 16 bit color monitors. The total number of colors supported are 65536*65536*65536.

Similarly we can calculate for 32 bit and 64 bit color systems.

More on RGB model

RGB for web design

Web browsers support only 8bit colors. Although the monitor is of higher bits, the browser is limited to supporting 8bit colors only. More on Web Colors.

Math.random and Math.floor

Math.random is a JavaScript function that returns a random number from 0 to 1(not including 1).

Math.floor function returns the largest integer less than or equal to a number.

Generating random color

This is a simple example to generate random colors in javascript.

Generating random colors using randomColor JavaScript Library

David Merfield has created a awesome JavaScript library to generate random colors. Its called as randomColor. Its provide features for similar colors, attractive colors, selective colors and much more functionality. It can be used for data visualization and arts.

Jun 16, 2014Narayan Prusty
Creating A Sticky HeaderLazy Loading Images And Its SEO Impact
Comments: 0

    Leave a Reply Cancel reply

    To create code blocks or other preformatted text, indent by four spaces:

        This will be displayed in a monospaced font. The first four
        spaces will be stripped off, but all other whitespace
        will be preserved.
        
        Markdown is turned off in code blocks:
         [This is not a link](http://example.com)
    

    To create not a block, but an inline code span, use backticks:

    Here is some inline `code`.

    For more help see http://daringfireball.net/projects/markdown/syntax

    Narayan Prusty

    I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

    Image8 years ago 1 Comment Web Development
    Share this
    0
    GooglePlus
    0
    Facebook
    0
    Twitter
    0
    Linkedin
    • Introduction to RGB color theory
    • RGB for web design
    • Math.random and Math.floor
    • Generating random color
    • Generating random colors using randomColor JavaScript Library
    Related Articles
    • Color Selection Techniques For Websites
    • JavaScript Change Console Log Color
    • Prevent Sleep using HTML5 Standby API
    • Creating A Simple Backdrop Effect
    • Adding Buttons to WordPress Visual Editor
    Our Sponsor
    My Books

    2014 - 2015 © QNimate
    All tutorials MIT license