background preloader

RGB Color Codes Chart

RGB Color Codes Chart
RGB color picker | RGB color codes chart | RGB color space | RGB color format and calculation | RGB color table RGB color picker RGB color codes chart Hover with cursor on color to get the hex and decimal color codes below: RGB color space RGB color space or RGB color system, constructs all the colors from the combination of the Red, Green and Blue colors. The red, green and blue use 8 bits each, which have integer values from 0 to 255. RGB ≡ Red, Green, Blue Each pixel in the LCD monitor displays colors this way, by combination of red, green and blue LEDs (light emitting diodes). When the red pixel is set to 0, the LED is turned off. Any value between them sets the LED to partial light emission. RGB color format & calculation RGB code has 24 bits format (bits 0..23): RGB = (R*65536)+(G*256)+B , (when R is RED, G is GREEN and B is BLUE) Calculation examples White RGB Color White RGB code = 255*65536+255*256+255 = #FFFFFF Blue RGB Color Blue RGB code = 0*65536+0*256+255 = #0000FF Red RGB Color See also

Related:  Principles of Visual DesignWeb Design

RGB-to-Hex Color Converter RGB-to-Hex Conversion Question: How do I convert RGB values of a color to a hexadecimal string? Answer: The RGB-to-hexadecimal converter algorithm is simple: make sure that your values are in the range 0...255, convert R, G, B to hex strings, and then concatenate the three hex strings together. CSS Cascading Style Sheets (CSS) are a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects like SVG or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media. CSS is one of the core languages of the open web and has a standardized W3C specification. Developed in levels, CSS1 is now obsolete, CSS2.1 is a recommendation, and CSS3, now split into smaller modules, is progressing on the standardization track.

A Few Rounds About Bullet Lists By Mark Nichol Before reading this post you might wanna check one we published a while ago titled 7 Rules For Formatting Lists. Here’s a quotation from it: “The items in unnumbered lists are often preceded by dots or other symbols known collectively as bullets, though such markers are technically not necessary, especially in a recipe or a materials list. (In those cases, it’s implicit that the ingredients or components are added or constructed in the order listed — it’s actually a numbered list that needs no numbers.)”

Shorthand properties Definition Shorthand properties are CSS properties that let you set the values of several other CSS properties simultaneously. Using a shorthand property, a Web developer can write more concise and often more readable style sheets, saving time and energy. The CSS specification defines shorthand properties to group the definition of common properties acting on the same theme. How To Use Styles In Microsoft Word To Save A Lot Of Work Most of the discussion on styles these days is about web pages and CSS, but everyone seems to have forgotten how styles can help in Word. I’m going to show you how to use styles in Word 2007, but if you have an older version you’ll be fine. This stuff is largely unchanged since Word for DOS, and that was too long ago to discuss. Most other word processors have similar capabilities, so don’t despair if you’re not a Word user. An analogy is the simplest way to approach this, so come outside with me, and take a look at the fence. No, really.

Responsive Images: If you're just changing resolutions, use srcset. If you're implementing responsive images (different images in HTML for different situations) and all you are doing is switching between different versions of the same image (the vast majority of usage), all you need is the srcset attribute on the <img>. Gaze upon this easy syntax: It's not just the syntax that is easy, it does a better job than <picture> with <source>s with explicit media attributes (we'll cover why in a moment).

The Educational Benefit of Ugly Fonts A few months ago, I wrote a speculative blog post about e-readers. Although I love my Kindle, I worried that these new gadgets made the act of reading a little bit too easy, and that this visual ease might lead, one day, to a shallower engagement with our texts. It was a rather tortured argument, an awkward mash-up of McLuhan and fMRI research. I’m happy to report that a brand-new paper in Cognition by a team of Princeton psychologists (Connor Diemand-Yauman, Daniel M. Oppenheimer and Erikka B.

Media Queries for Standard Devices If you think responsive's simple, I feel bad for you son. We got 99 viewports, but the iPhone's just one. —Josh Brewer, March 10, 2010 A major component of responsive design is creating the right experience for the right device. With a gazillion different devices on the market, this can be a tall task. We've rounded up media queries that can be used to target designs for many standard and popular devices that is certainly worth a read. How To Write A Visual Style Guide for eLearning Sharebar The most efficient way to achieve consistency in visual design for an eLearning course or presentation is to write a visual style guide. It’s nearly a necessity when working on a team and it’s also valuable when working solo (though a shorter guide may suffice). In either situation, here are some benefits of writing an eLearning visual style guide. See below. Forces you to make up-front design decisionsProvides one visual standard for an entire course, curriculum or companySaves time when you need to look up colors, font sizes, etc.Provides a reference for future courses if you want to re-use the designProvides a way to get buy-in from your client

HTML5 <picture> Element Responsive design techniques are a way for developers to adapt a site layout to a wide range of devices, from desktops to iPhones, and have it consistently look sharp and load quickly. And no responsive design solution is complete without an adequate technique for dealing with images. An ideal adaptive image strategy should do the following: Color Theory Tutorial, Concepts, Essays and Color Basics Why study color theory? If you are involved in the creation or design of visual documents, an understanding of color will help when incorporating it into your own designs. Choices regarding color often seem rather mystical, as many seem to base decisions on nothing other than "it looks right."

Responsive Web Design Tips from Bootstrap's CSS With the release of version 3, Bootstrap has gone mobile first, building on its already responsive base. What kinds of things does Bootstrap include in its CSS to help with this? Let’s examine a few things and gain some insight that might help us in our own custom projects. Bootstrap has clearly defined breakpoints for different kinds of devices, specified by using CSS media queries. The following are the breakpoint categories used for the different types of devices: Note: Mobile devices that we use today come with 2 different screen orientations: Portrait and Landscape.

Three Things You Must Know When Working With Graphics Sharebar One barrier to successful visual design work is a lack of technical knowledge. In this excerpt from my book, Visual Design Solutions, I try to close this knowledge gap. Here are some foundation concepts you need to grasp to feel comfortable working with graphics.