← Back to list

Color Basic

Color Model

yunika wardhani · 2024-11-13 10:35 · 0 claps · 5.7 min read
#rgb #cmyk #hex #hsl #hsb
Open on Medium ↗

Color Basic

Color Model

In design, the color model is an important concept that can help in determining display and printing colors. The color model itself is divided into several parts, the following is an explanation of the main color models commonly used as reported by Kayanacreative.com (2023):

  1. RGB (Red, Green, Blue), is an additive color model that is the result of mixing the primary colors of light. Additive colors are used for digital needs such as computer monitors, cellphone layers, and television layers. The colors produced from this model by combining several colors of red, green, and blue light. Of the three colors also produce other colors by combining the three colors (Red and Green produce Yellow, Green and Blue produce Cyan, and Red and Blue produce Magenta).
  2. CMYK (Cyan, Magenta, Yellow, Key/Black), is a subtractive color model that involves mixing color pigments with layering to create new colors or referred to as material/paint colors. This color is used for printing products (printed product). The results of this mixing are usually flyers, brochures, t-shirts, pamphlets and various other printed products.
  3. HEX (Hexadecimal), is a color model that represents colors in alphanumeric form/format. This color model is usually used to write color codes in web design. The color code uses a combination of six digit numbers and letters preceded by a hash mark (#). The format is #RRGGBB, RR is red/red, GG is green/green, and BB is blue/blue. In addition, the codes used to affect color intensity are #FFFFFF (white) and #000000 (black).
  4. HSL (Hue, Saturation, Lightness) and HSB (Hue, Saturation, Brightness), are color models used to describe colors more intuitively than the RGB model. Hue is the order of colors represented on the wheel to see which color is used. Saturation is the amount of color intensity seen by the eye. While Lightness/Brightness is the color brightness setting.
  5. HSL and HSB look the same but there is a difference between the two, namely in the level of brightness produced. In HSB, white color is only produced if the saturation is at position 0, while in HSL 100% lightness will give white color regardless of saturation. HSL and HSB have the same use, set in graphic design applications where their use is user-friendly and versatile for all design purposes such as images, logos, vectors, illustrations, and various other graphic designs.

RGB (Red, Green, Blue): Use in digital media

RGB is the standard for digital displays, because of its ability to produce a wide and accurate color spectrum and its compatibility with various digital devices. In web design, of course, the RGB model is more suitable because its appearance is more consistent and does not undergo significant changes (Binus.com, 2023). Therefore, RGB models are often used in digital media due to several significant advantages (Content IDCloudHost, 2021), for example:

  1. In web app design: icons, buttons, graphics
  2. In branding: online logos, online ads
  3. In social media: images for posting purposes (feeds, posts), profile photos, backgrounds/profile covers
  4. In visual content: videos, digital graphics. Infographic

For storage formats, RGB is often used for digital design needs. The formats used are JPEG, PSD (Photoshop), PNG, GIF. avoid the use of TIFF, EPS, PDF, and BMP formats in the use of RGB colors.

CMYK (Cyan, Magenta, Yellow, Black): Use in printing

CMYK model colors, used in printing because this color system allows the four primary colors to be combined to produce different colors. CMYK color is considered more suitable for print media because of its working principle that is in accordance with the printing process and its ability to produce more accurate and consistent colors when printed on paper. It is different when printing using the RGB color model, it is likely to experience several problems related to less detailed color accuracy where the colors in the ink cannot mimic the color of light perfectly (Revou.co, 2024). Reporting from Content IDCloudHost (2021), the need to use CMYK for project designs that are physically printed and not displayed on the layer, and examples of its use are as follows:

  1. In branding: business cards, stationery, stickers/labels
  2. In advertising: billboards, posters, pamphlets, vehicle bunkers, brochures, banners
  3. In products/merchandise: printing of t-shirts, hats, merchandise (mugs, pens), product packaging, restaurant menus.

To save CMYK color model formats, we recommend using formats such as PDF, AI (Illustrator), and EPS.

HSV (Hue, Saturation, Value) and HSL (Hue, Saturation, Lightness): Uses in design and computer graphics

The HSV and HSB color models are two alternative representations of the RGB color model that are more intuitive and more responsive to the way people perceive color. Both are commonly used in computer design and graphics, but there are differences in the way colors are measured and displayed. According to Pamungkas, A., (reported from the page Programmingmatlab.com 2023) their use in design and computer graphics is as follows:

  • HSL (Lightness), a measurement of the brightness of a color, makes it possible to control the degree to which a color appears dark or light without any changes to hue and saturation. The HSL color model is often used in graphic design and more creative image editing (photo editing and color appearance adjustments),
  • While HSB/V, this color model measures color brightness similar to the HIS (Intensity) model, but the HSV model controls how light or dark the color is by affecting hue and saturation. HSV models are widely used in various applications such as medical image processing, object tracking, and color matching.

Color Spectrum

Reporting from the Designclinicals.com page (2023), the color spectrum is the range of colors visible to the human eye when white light is scattered by a prism or other device, thus forming several colors called rainbow colors (red, orange, yellow, green, blue, indigo, and purple). According to Santoso, et al (2020), from the results of his research in examining the value of the color spectrum curs to the color of sunlight and artificial light for plant growth produced the following.

  1. Sunlight, has a complete spectrum and is spread evenly from 400nm to 700nm. This spectrum is very suitable for plant growth because the spectrum value is 50%, including the blue and red spectrum which will be absorbed by plant chlorophyll.
  2. Philips LED artificial light (Cool White), this LED artificial light has a complete spectrum from 400nm to 700nm, similar to sunlight. However, the spread of the spectrum of this artificial light is uneven as the dominating colors are green, yellow, and orange. This light is still arguably suitable for plant growth, but it is less efficient because it has a low proportion of the blue and red spectrum with a value of less than 40%.

Primary, secondary, and tertiary colors

  1. Primary colors are basic colors or parent colors that have no mixture of other colors. From its origin, this color has no mixture of other colors or you could say a color that stands alone. This color consists of 3 types, namely red, yellow, blue.
  2. Secondary colors, this color is a derivative of the primary color or called the second color of the primary. Primary colors are produced by mixing 2 primary colors, such us red+yellow = orange, yellow+blue = green, and red+blue = violet. However, the colors that result from mixing can produce infinity depending on the amount of mixing.
  3. Tertiary colors, are derived colors from primary and secondary or called third colors. There are 6 types of colors produced.
  • Yellow + orange color mixture = yellow-orangean
  • Orange + red color mixture = reddish orange
  • Red + purple mixture = purplish red
  • Purple + blue mixture = bluish purple
  • Blue + green mixture = turquoise
  • Green + yellow = yellowish green

Just like mixing colors in secondary, tertiary also produces infinite colors depending on the amount of mixing.

Definition of neutral colors (black, white, gray)

Neutral colors are a category of colors that are not too prominent and are suitable to be combined with other colors. This color is considered a color that has no competition with other colors because it is easily blended with all colors. Neutral colors that are often used are as follows.

  1. Black, which is a classic and solid color. It symbolizes strength, elegance and assertiveness, giving the design an elegant and dramatic touch.
  2. White is a bright, clean and timeless color. This color symbolizes purity, cleanliness, and simplicity, often used to create the impression of a space that looks spacious and bright.
  3. Gray color, is a blend of black and white with a dose of 1: 1 or equivalent. This color is considered equivalent to other colors so that it gives a balanced impression. In addition, this color is versatile and creates a calm and thoughtful atmosphere.

True to its name, neutral, this type of color has several significant functions in design. Neutral colors are often used as backgrounds because they are able to accentuate other colors that look lighter or darker. Not only that, neutral colors are also able to give the impression of flexibility because they can be easily combined with other colors without disturbing the visual harmony.


메타데이터
post_id
af2e3a0fa867
slug
color-basic-af2e3a0fa867
url
https://medium.com/@yunikawardhani39/color-basic-af2e3a0fa867
canonical_url
https://medium.com/@yunikawardhani39/color-basic-af2e3a0fa867
author_url
https://medium.com/@yunikawardhani39
status
ok
fetched_at
2026-07-22 04:54:32