# freeCodeCamp Challenge Guide: Use Hex Code to Mix Colors

**URL:** <https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-hex-code-to-mix-colors/18359>\
**Category:** freeCodeCamp Contributors\
**Tags:** guide\
**Created:** [July 7, 2016, 11:27pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-hex-code-to-mix-colors/18359 "2016-07-07T23:27:12Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![camperbot](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/camperbot/32/18364_2.png) [@camperbot](https://forum.freecodecamp.org/u/camperbot)\
**Post date:** [July 7, 2016, 11:27pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-hex-code-to-mix-colors/18359/1 "2016-07-07T23:27:12Z")

</div>

# [Use Hex Code to Mix Colors](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-hex-code-to-mix-colors)

* * *

## Hints

### Hint 1

In order to change the color of a class within the style element, we simply replace the color itself with the hexcode shown below.

**Before**

```html
<style>
  .ClassName {
    color: black;
}
</style>

```

**After**

```html
<style>
  .ClassName {
    color: #FFFFFF; /*this represents the hex code of the colour, white*/
}
</style>

```

**Note:** In the class,`.ClassName`, within the `<style>` element, the color has changed from a color of `black` into the hexcode, `#FFFFFF`, which shows that the color of the class `.ClassName` has changed from black to white in the `<style>` element.

* * *

## Solutions

> **Solution 1 (Click to Show/Hide)**
>
> From the Problem above, we need to change `black` from the `color` element in the `<style>` element, into the given hex codes from the table based on the colour that the class needs. For example, the class `.red-text` clearly needs their `color` element to be changed from `black` into a red colour, where the table gives us the hex code of `#FF0000` for the colour red, which is shown below.
> 
> **Before changing `color` of class `.red-text`**
> 
> ```html
> <style>
> .red-text {
> color: black;
> }
> </style>
> 
> ```
> 
> ### After changing `color` of class `.red-text`
> 
> ```html
> <style>
> .red-text {
> color: #FF0000; /* Color has changed into red when we used this hex code from the table*/
> }
> </style>
> 
> ```
> 
> **Final Solution**  
> After changing `color` of other classes, the final solution reveals that we have changed the `color` element of these text classes with hex codes shown below:
> 
> ```html
> <style>
> .red-text {
> color: #FF0000;
> }
> .green-text {
> color: #00FF00;
> }
> .dodger-blue-text {
> color: #1E90FF;
> }
> .orange-text {
> color: #FFA500;
> }
> </style>
> 
> ```

---

<div class="post-metadata">

**Author:** ![anon52159105](https://avatars.discourse-cdn.com/v4/letter/a/45deac/32.png) [@anon52159105](https://forum.freecodecamp.org/u/anon52159105)\
**Post date:** [August 6, 2017, 11:40pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-hex-code-to-mix-colors/18359/2 "2017-08-06T23:40:16Z")

</div>

Closed on August 6, 2017, 11:40pm UTC



---

<div class="post-metadata">

**Author:** ![camperbot](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/camperbot/32/18364_2.png) [@camperbot](https://forum.freecodecamp.org/u/camperbot)\
**Post date:** [August 10, 2019, 1:19am UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-hex-code-to-mix-colors/18359/3 "2019-08-10T01:19:00Z")

</div>

Opened on August 10, 2019, 1:19am UTC



---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 7, 2025, 12:00pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-hex-code-to-mix-colors/18359/4 "2025-01-07T12:00:04Z")

</div>

Closed on January 7, 2025, 12:00pm UTC