Палитра цветов (rgb и hex код)

Details

The Decimal color is a dark color, and the websafe version is hex FF0000, and the color name is red. The color can be described as dark saturated red. A complement of this color would be , and the grayscale version is .A 20% lighter version of the original color is , and is the 20% darker color. If you saturate the color by 10%, you get , and if you desaturate by 10%, it is .

Distribution

RGB Color DistributionThe distribution of the RGB values, red, green and blue.RedThe Perecentage of Red in the Color.GreenThe Perecentage of Green in the Color.BlueThe Perecentage of Blue in the Color.RGB

  •  Red (100%)
  •  Green (0%)
  •  Blue (0%)

RYB Color DistributionThe distribution of the RYB values, red, yellow and blue.RedThe Perecentage of Red in the Color.YellowThe Perecentage of Yellow in the Color.BlueThe Perecentage of Blue in the Color.RYB

  •  Red (100%)
  •  Yellow (0%)
  •  Blue (0%)

CMYK Color DistributionThe distribution of the CMYK values, Cyan, Magenta, Yellow and Black.CyanThe Perecentage of Cyan in the Color.MagentaThe Perecentage of Magenta in the Color.YellowThe Perecentage of Yellow in the Color.BlackThe Perecentage of Black in the Color.CMYK

  •  Cyan (0%)
  •  Magenta (100%)
  •  Yellow (100%)
  •  Black (0%)

CMY Color DistributionThe distribution of the CMY values, Cyan, Magenta, Yellow.CyanThe Perecentage of Cyan in the Color.MagentaThe Perecentage of Magenta in the Color.YellowThe Perecentage of Yellow in the Color.CMY

  •  Cyan (0%)
  •  Magenta (100%)
  •  Yellow (100%)

Brightness & Saturation Gradients

These gradients show how the Decimal color 16711680 changes by changing the brightness by 10 percent. The first figure shows a shift by +10% for each color and the second figure -10%.

Similar to the brightness gradients but the following saturation gradients show a change of the Decimal color 16711680 by changing the saturation by 10% instead.

Brightness GradientThese gradients show how the {format} color {color} changes by changing the brightness by 10 percent. The first figure shows a shift by +10% for each color and the second figure -10%.16711680The Color 16711680.16777209The Color 16777209.16777180The Color 16777180.16775871The Color 16775871.16767908The Color 16767908.16760201The Color 16760201.16752238The Color 16752238.16744532The Color 16744532.16736315The Color 16736315.16727584The Color 16727584.16711680The Color 16711680.Brightness Gradient

  •  16711680
  •  16727584
  •  16736315
  •  16744532
  •  16752238
  •  16760201
  •  16767908
  •  16775871
  •  16777180
  •  16777209

Brightness Gradient16711680The Color 16711680.The Color 0.1179648The Color 1179648.3801090The Color 3801090.5898244The Color 5898244.7929857The Color 7929857.10092544The Color 10092544.12255232The Color 12255232.14483456The Color 14483456.16711680The Color 16711680.Brightness Gradient

  •  16711680
  •  14483456
  •  12255232
  •  10092544
  •  7929857
  •  5898244
  •  3801090
  •  1179648
  •  0

Saturation Gradient16711680The Color 16711680.16770790The Color 16770790.16764108The Color 16764108.16757683The Color 16757683.16751001The Color 16751001.16744576The Color 16744576.16737894The Color 16737894.16731469The Color 16731469.16724787The Color 16724787.16718105The Color 16718105.16711680The Color 16711680.Saturation Gradient

  •  16711680
  •  16718105
  •  16724787
  •  16731469
  •  16737894
  •  16744576
  •  16751001
  •  16757683
  •  16764108
  •  16770790

Harmonies

Analogous

The analogous color harmony consists of three colors that are next to each other on the color wheel.

AnalogousThe analogous color harmony consists of three colors that are next to each other on the color wheel.16711782The Color 16711782.13263616The Color 13263616.16711680The Color 16711680.16711782The Color 16711782.Analogous

  •  16711782
  •  16711680
  •  13263616

Triad

The triadic color harmony groups three colors that are evenly spaced from another and form a triangle on the color wheel.

TriadThe triadic color harmony groups three colors that are evenly spaced from another and form a triangle on the color wheel.16711680The Color 16711680.33791The Color 33791.40507The Color 40507.16711680The Color 16711680.Triad

  •  16711680
  •  40507
  •  33791

Complementary

The complementary color scheme is a pair of colors which are on the opposite of each other on the color wheel.

ComplementaryThe complementary color scheme is a pair of colors which are on the opposite of each other on the color wheel.16711680The Color 16711680.65535The Color 65535.16711680The Color 16711680.Complementary

  •  16711680
  •  65535

Split Complementary

Split-complementary colors differ from the complementary color scheme. The scheme consists of three colors, the original color and two neighbors of the complement color.

Split ComplementarySplit-complementary colors differ from the complementary color scheme. The scheme consists of three colors, the original color and two neighbors of the complement color.39679The Color 39679.41372The Color 41372.16711680The Color 16711680.39679The Color 39679.Split Complementary

  •  39679
  •  16711680
  •  41372

Square

The square scheme is like the rectangle color scheme, but the four colors are evenly spaced on the color wheel.

SquareThe square scheme is like the rectangle color scheme, but the four colors are evenly spaced on the color wheel.16711680The Color 16711680.10310399The Color 10310399.41459The Color 41459.38656The Color 38656.16711680The Color 16711680.Square

  •  16711680
  •  38656
  •  41459
  •  10310399

Rectangle

The rectangle color scheme consists of four colors that form a rectangle on the color wheel.

RectangleThe rectangle color scheme consists of four colors that form a rectangle on the color wheel.16711680The Color 16711680.36351The Color 36351.41459The Color 41459.10189824The Color 10189824.16711680The Color 16711680.Rectangle

  •  16711680
  •  10189824
  •  41459
  •  36351

Sweetspot

The sweet spot groups the original color and five complimentary colors.

SweetspotThe sweet spot groups the original color and five complimentary colors.16711680The Color 16711680.8421504The Color 8421504.The Color 0.8409682The Color 8409682.16711935The Color 16711935.16757683The Color 16757683.16711680The Color 16711680.Sweetspot

  •  16711680
  •  16757683
  •  16711935
  •  8409682
  •  0
  •  8421504

Details

The Decimal color is a light color, and the websafe version is hex FFFFFF, and the color name is white. A complement of this color would be , and the grayscale version is .A 20% lighter version of the original color is , and is the 20% darker color. If you saturate the color by 10%, you get , and if you desaturate by 10%, it is .

Distribution

RGB Color DistributionThe distribution of the RGB values, red, green and blue.RedThe Perecentage of Red in the Color.GreenThe Perecentage of Green in the Color.BlueThe Perecentage of Blue in the Color.RGB

  •  Red (100%)
  •  Green (100%)
  •  Blue (100%)

RYB Color DistributionThe distribution of the RYB values, red, yellow and blue.RedThe Perecentage of Red in the Color.YellowThe Perecentage of Yellow in the Color.BlueThe Perecentage of Blue in the Color.RYB

  •  Red (100%)
  •  Yellow (100%)
  •  Blue (100%)

CMYK Color DistributionThe distribution of the CMYK values, Cyan, Magenta, Yellow and Black.CyanThe Perecentage of Cyan in the Color.MagentaThe Perecentage of Magenta in the Color.YellowThe Perecentage of Yellow in the Color.BlackThe Perecentage of Black in the Color.CMYK

  •  Cyan (0%)
  •  Magenta (0%)
  •  Yellow (0%)
  •  Black (0%)

CMY Color DistributionThe distribution of the CMY values, Cyan, Magenta, Yellow.CyanThe Perecentage of Cyan in the Color.MagentaThe Perecentage of Magenta in the Color.YellowThe Perecentage of Yellow in the Color.CMY

  •  Cyan (0%)
  •  Magenta (0%)
  •  Yellow (0%)

Brightness & Saturation Gradients

These gradients show how the Decimal color 16777215 changes by changing the brightness by 10 percent. The first figure shows a shift by +10% for each color and the second figure -10%.

Similar to the brightness gradients but the following saturation gradients show a change of the Decimal color 16777215 by changing the saturation by 10% instead.

Brightness Gradient16777215The Color 16777215.1776411The Color 1776411.3158064The Color 3158064.4671303The Color 4671303.6184542The Color 6184542.7829367The Color 7829367.9539985The Color 9539985.11250603The Color 11250603.13027014The Color 13027014.14869218The Color 14869218.16777215The Color 16777215.Brightness Gradient

  •  16777215
  •  14869218
  •  13027014
  •  11250603
  •  9539985
  •  7829367
  •  6184542
  •  4671303
  •  3158064
  •  1776411

Saturation GradientSimilar to the brightness gradients but the following saturation gradients show a change of the {format} color {color} by changing the saturation by 10% instead.16777215The Color 16777215.16718105The Color 16718105.16724787The Color 16724787.16731469The Color 16731469.16737894The Color 16737894.16744576The Color 16744576.16751001The Color 16751001.16757683The Color 16757683.16764108The Color 16764108.16770790The Color 16770790.16777215The Color 16777215.Saturation Gradient

  •  16777215
  •  16770790
  •  16764108
  •  16757683
  •  16751001
  •  16744576
  •  16737894
  •  16731469
  •  16724787
  •  16718105

CSS Examples

The CSS property to change the color of the text to Decimal 16711680 is called «color». The color property can be set on classes, ids or directly on the HTML element .

This example shows how text in the color #FF0000 looks like.

If you want to add a text shadow in that color use .

Here you see how black text with a 4 pixel #FF0000 colored shadow looks like.

Border

This example shows the color as border, it can be applied via the CSS property «border» or «border-color».

The CSS property to change the border of an element to Decimal 16711680 is called «border». The border property can be set on classes, ids or directly on the HTML element .

If only the border color should be changed can be used.

Here you see how a box with a 4 pixel #FF0000 colored shadow looks like.

If you want to add a box shadow in that color use .

Background

The CSS property to change the background color of an element to Decimal 16711680 is called «background». The background property can be set on classes, ids or directly on the HTML element .

If only the background color should be changed can be used.

This example shows the color as background, it is applied via the CSS property «background».

To optimize and compress your CSS code, you can use our online CSS compressor and optimizer based on csstidy. If you want to create a linear gradient as background or border, check our CSS Gradient Generator.

Conversions

Here you see your color converted to 15 different color formats like RGB, CMYK, HSV, HSL, CIELab, Android, Decimal, and YUV. Convert multiple colors at once or get Conversions and Harmonies via the REST API.

Conversions Part 1
Format Color
Hex FFFFFF
RGB 255, 255, 255
RGB Percent 100%, 100%, 100%
CMY 0.0000, 0.0000, 0.0000
CMYK 0.00, 0.00, 0.00, 0.00
HSL 0°, 0%, 100%
HSV 0°, 0%, 100%
XYZ 95.0500, 100.0000, 108.9000
Conversions Part 2
Format Color
RYB 255, 255, 255
Decimal
CIELab 100.00, 0.01, -0.01
CIELCh 100, 0.012, 296.813
Yxy 100.0000, 0.3127, 0.3290
Android (android.graphics.Color) (0xFFFFFFFF)
YUV 255.0000, 0.0000, 0.0000

CSS Examples

The CSS property to change the color of the text to Decimal 16777215 is called «color». The color property can be set on classes, ids or directly on the HTML element .

This example shows how text in the color #FFFFFF looks like.

If you want to add a text shadow in that color use .

Here you see how black text with a 4 pixel #FFFFFF colored shadow looks like.

Border

This example shows the color as border, it can be applied via the CSS property «border» or «border-color».

The CSS property to change the border of an element to Decimal 16777215 is called «border». The border property can be set on classes, ids or directly on the HTML element .

If only the border color should be changed can be used.

Here you see how a box with a 4 pixel #FFFFFF colored shadow looks like.

If you want to add a box shadow in that color use .

Background

The CSS property to change the background color of an element to Decimal 16777215 is called «background». The background property can be set on classes, ids or directly on the HTML element .

If only the background color should be changed can be used.

This example shows the color as background, it is applied via the CSS property «background».

To optimize and compress your CSS code, you can use our online CSS compressor and optimizer based on csstidy. If you want to create a linear gradient as background or border, check our CSS Gradient Generator.

Direct Access

You are welcome, and invited, to directly access the underlying memory of this object if that suits your needs. That is to say, there is no «CRGB::setRed( myRedValue )» method; instead you just directly store ‘myRedValue’ into the «.red» data member on the object. All of the methods on the CRGB class expect this, and will continue to operate normally. This is a bit unusual for a C++ class, but in a microcontroller environment this can be critical to maintain performance.

The CRGB object «is trivially copyable», meaning that it can be copied from one place in memory to another and still function normally.

Methods

In addition to simply providing data storage for the RGB colors of each LED pixel, the CRGB class also provides several useful methods color-manipulation, some of which are implemented in assembly language for speed and compactness. Often using the class methods described here is faster and smaller than hand-written C/C++ code to achieve the same thing.

Previews

White Background

This preview shows how the Decimal color 16777215 looks on a white background.

The color contrast ratio for these colors is 1.00, which fails to comply with the Web Content Accessibility Guidelines (WCAG) 2.0. Details can be found at https://www.w3.org/TR/WCAG20/.

Black Background

This preview shows how the Decimal color 16777215 looks on a black background.

The color contrast ratio for these colors is 21.00, which passes the AAA level of the Web Content Accessibility Guidelines (WCAG) 2.0 for all text sizes. Details can be found at https://www.w3.org/TR/WCAG20/.

Decimal 16777215 Background

This preview shows how black text looks on a background with the Decimal color 16777215.

This preview shows how white text looks on a background with the Decimal color 16777215.

Setting RGB Colors

CRGB colors can be set by assigning values to the individual red, green, and blue channels. In addition, CRGB colors can be set a number of other ways which are often more convenient and compact. The two pieces of code below perform the exact same function.

Some performance-minded programmers may be concerned that using the ‘high level’, ‘object-oriented’ code in the second example comes with a penalty in speed or code size. However, this is simply not the case; the examples above generate literally identical machine code, taking up exactly the same amount of program memory, and executing in exactly the same amount of time. Given that, the choice of which way to write the code, then, is entirely a matter of personal taste and style. All other things being equal, the simpler, higher-level, more object-oriented code is generally recommended.

Here are the other high-level ways to set a CRGB color in one step:

Again, for the performance-minded programmer, it’s worth noting that all of the examples above compile down into exactly the same number of machine instructions. Choose the method that makes your code the simplest, most clear, and easiest to read and modify.

Colors can also be copied from one CRGB to another:

If you are copying a large number of colors from one (part of an) array to another, the standard library function memmove can be used to perform a bulk transfer; the CRGB object «is trivially copyable».

Performance-minded programmers using AVR/ATmega MCUs to move large number of colors in this way may wish to use the alternative «memmove8» library function, as it is measurably faster than the standard libc «memmove».

Setting HSV Colors

Introduction to HSV

CRGB color objects use separate red, green, and blue channels internally to represent each composite color, as this is exactly the same way that multicolor LEDs do it: they have one red LED, one green LED, and one blue LED in each ‘pixel’. By mixing different amounts of red, green, and blue, thousands or millions of resultant colors can be displayed.

However, working with raw RGB values in your code can be awkward in some cases. For example, it is difficult to work express different tints and shades of a single color using just RGB values, and it can be particular daunting to describe a ‘color wash’ in RGB that cycles around a rainbow of hues while keeping a constant brightness.

  • Hue is the ‘angle’ around a color wheel
  • Saturation is how ‘rich’ (versus pale) the color is
  • Value is how ‘bright’ (versus dim) the color is

In the library, the «hue» angle is represented as a one-byte value ranging from 0-255. It runs from red to orange, to yellow, to green, to aqua, to blue, to purple, to pink, and back to red. Here are the eight cardinal points of the hue cycle in the library, and their corresponding hue angle.

  • Red (0..) «HUE_RED»
  • Orange (32..) «HUE_ORANGE»
  • Yellow (64..) «HUE_YELLOW»
  • Green (96..) «HUE_GREEN»
  • Aqua (128..) «HUE_AQUA»
  • Blue (160..) «HUE_BLUE»
  • Purple (192..) «HUE_PURPLE»
  • Pink(224..) «HUE_PINK»

Often in other HSV color spaces, hue is represented as an angle from 0-360 degrees. But for compactness, efficiency, and speed, this library represents hue as a single-byte number from 0-255. There’s a full wiki page how FastLED deals with HSV colors here.

«saturation» is a one-byte value ranging from 0-255, where 255 means «completely saturated, pure color», 128 means «half-saturated, a light, pale color», and 0 means «completely de-saturated: plain white».

«value» is a one-byte value ranging from 0-255 representing brightness, where 255 means «completely bright, fully lit», 128 means «somewhat dimmed, only half-lit», and zero means «completely dark: black.»

The CHSV Object

In the library, a CHSV object is used to represent a color in HSV color space. The CHSV object has the three one-byte data members that you might expect:

  • hue (or ‘h’)
  • saturation (or ‘sat’, or just ‘s’)
  • value (or ‘val’, or just ‘v’)
    These can be directly manipulated in the same way that red, green, and blue can be on a CRGB object. CHSV objects are also «trivially copyable».

Automatic Color Conversion

The library provides fast, efficient methods for converting a CHSV color into a CRGB color. Many of these are automatic and require no explicit code.

For example, to set an led to a color specified in HSV, you can simply assign a CHSV color to a CRGB color:

There is no conversion back from CRGB to CHSV provided with the library at this point.

Explicit Color Conversion

  • «Spectra» have barely any real yellow in them; the yellow band is incredibly narrow.
  • «Rainbows» have a band of yellow approximately as wide as the ‘orange’ and ‘green’ bands around it; the yellow range is easy to see.

All of the automatic color conversions in the library use the «HSV Rainbow» color space, but through use of explicit color conversion routines, you can select to use the «HSV Spectrum» color space. There’s a full wiki page how FastLED deals with HSV colors here.

The first explicit color conversion function is hsv2rgb_rainbow, which is used in the automatic color conversions:

The HSV Spectrum color space has different cardinal points, and only six of them, which are correspondingly spread out further numerically. Here is the «Spectrum» color map that FastLED provides if you call hsv2rgb_spectrum explicitly:
Click here for full-size chart.

  • Red (0..)
  • Yellow (42..)
  • Green (85..)
  • Aqua (128..)
  • Blue (171..)
  • Purple (213..)

The hsv2rgb_spectrum conversion function’s API is identical to hsv2rgb_rainbow:

Why use the Spectrum color space, instead of Rainbow? The HSV Spectrum color space can be converted to RGB a little faster than the HSV Rainbow color space can be — but the results are not as good visually; what little yellow there is appears dim, and at lower brightnesses, almost brownish. So there is a trade-off between a few clock cycles and visual quality. In general, start with the Rainbow functions (or better yet, the automatic conversions), and drop down to the Spectrum functions only if you completely run out of speed.

Both color space conversion functions can also convert an array of CHSV colors to a corresponding array of CRGB colors:

The function «hsv2rgb_spectrum» can also be called this way for bulk conversions.

Conversions

Here you see your color converted to 15 different color formats like RGB, CMYK, HSV, HSL, CIELab, Android, Decimal, and YUV. Convert multiple colors at once or get Conversions and Harmonies via the REST API.

Conversions Part 1
Format Color
Hex FF0000
RGB 255, 0, 0
RGB Percent 100%, 0%, 0%
CMY 0.0000, 1.0000, 1.0000
CMYK 0.00, 1.00, 1.00, 0.00
HSL 0°, 100%, 50%
HSV 0°, 100%, 100%
XYZ 41.2400, 21.2600, 1.9300
Conversions Part 2
Format Color
RYB 255, 0, 0
Decimal
CIELab 53.23, 80.11, 67.22
CIELCh 53, 104.576, 40.000
Yxy 21.2600, 0.6401, 0.3300
Android (android.graphics.Color) (0xFFFF0000)
YUV 76.2450, -37.5888, 156.7681

Previews

White Background

This preview shows how the Decimal color 16711680 looks on a white background.

The color contrast ratio for these colors is 4.00, which passes the AA level for large text above 18pt. Details can be found at https://www.w3.org/TR/WCAG20/.

Black Background

This preview shows how the Decimal color 16711680 looks on a black background.

The color contrast ratio for these colors is 5.25, which passes the AA level of the Web Content Accessibility Guidelines (WCAG) 2.0 for any text size and the AAA level for large text above 18pt. Details can be found at https://www.w3.org/TR/WCAG20/.

Decimal 16711680 Background

This preview shows how black text looks on a background with the Decimal color 16711680.

This preview shows how white text looks on a background with the Decimal color 16711680.

Ссылка на основную публикацию