How to Use Colors in SFML

SFML uses 32-bit RGBA values for everything that deals with colors. RGBA stands for Red, Green, Blue, and Alpha where red, green and blue represent the three base color components from which over 16 million colors can be combined, while the alpha value is used to determine the transparency of the color.

Each component is represented with 8 bits ranging from 0 to 255 in decimal or 0x00 to 0xFF in hexadecimal notation. It's important to remember this when integrating with other software or when reading graphics literature, as colors will often be represented as a floating point range going from 0.0 to 1.0.

SFML provides multiple ways to define and use a color:

• There are a few predefined colors
  • █ sf::Color::Black
  • █ sf::Color::White
  • █ sf::Color::Red
  • █ sf::Color::Green
  • █ sf::Color::Blue
  • █ sf::Color::Yellow
  • █ sf::Color::Magenta
  • █ sf::Color::Cyan
  • sf::Color::Transparent (more on that later)
• Component constructor, where each component is an sf::Uint8:
  • auto color = sf::Color{ red, green, blue, alpha };
  • auto color = sf::Color{ red, green, blue };
• Integer constructor, usually used with hexadecimal notation:
  • auto color = sf::Color{ 0xFF0000FF }; // White non-transparent

Examples

Blue

• sf::Color::Blue
• sf::Color{ 0, 0, 255, 255 }
• sf::Color{ 0, 0, 255 }
• sf::Color{ 0x0000FFFF }

Dark Gray

• sf::Color{ 55, 55, 55, 255 }
• sf::Color{ 55, 55, 55 }
• sf::Color{ 0x373737FF }

Semi-Transparent Green

• sf::Color{ 0, 255, 0, 127 }
• sf::Color{ 0x00FF007F }

Transparency

There are a few things that often cause confusion when it comes to handling of transparent colors in SFML:

• sf::Color::Transparent isn't a magical transparent color, but it's a simple shorthand for sf::Color{ 0, 0, 0, 0 }, as such the base color is black and depending on how you use it (e.g. for a gradient), the black color will show. If you need a different color, you can easily use your own with an alpha value of 0.
• Clearing a sf::RenderWindow with sf::Color::Transparent or any other alpha value, will not make the window transparent. This is not supported by SFML, but others have made some custom implementations. However, clearing a sf::RenderTexture with a transparent color, does make the render texture transparent.
• How the alpha value is actually applied to the window or render texture is defined by blend modes. By default alpha blending is used, meaning the alpha values stack up as you'd expect. If you want the transparency values directly applied, you can use sf::BlendMode::None. For more details check out the official documentation.

Operations

SFML has a few mathematical operations defined on the color class.

• Component-wise multiplication (modulation) which are then divided by 255 to fit into the range [0-255].
  • For example: {0, 100, 1} * {10, 10, 10} = {0, 3, 10}
• Component-wise addition with clamping to 255.
  • For example: {0, 200, 10} + {100, 100, 100} = {100, 255, 110}
• Component-wise subtraction with clamping to 0.
  • For example: {0, 100, 10} - {100, 50, 25} = {0, 50, 0}