​x
 
1
<!DOCTYPE html>
2
<title>Color Example</title>
3
<style>
4
    div {
5
        padding: 20px;
6
        margin: 20px;
7
    }
8
    .textColor {
9
        color: #ff8c00;
10
        background-color: white;
11
    }
12
    .borderColor {
13
        border-width: 3px;
14
        border-style: solid;
15
        border-color: #ff8c00;
16
    }
17
    .backgroundColor {
18
        background-color: #ff8c00;
19
        color: white;
20
    }
21
    .backgroundGradient {
22
        background: linear-gradient(to bottom, white, #ff8c00);
23
        color: white;
24
    }
25
​
26
    .lighterColor {
27
        background: #FFAE4C;
28
    }
29
    .darkerColor {
30
        background: #B26200;
31
    }
32
    .lighterColor > p,
33
    .darkerColor > p {
34
        color: black;
35
        background: white;
36
        padding: 3px;
37
        border-radius: 3px;
38
        display: inline-block;
39
    }
40
​
41
</style>
42
<div class="textColor borderColor">
43
    <h1>Testing Text in #ff8c00</h1>
44
    <p>This text has been styled with a color of #ff8c00.</p>
45
    <p>The border is also uses #ff8c00.</p>
46
    <p>Try changing the values to see how it affects the output.</p>
47
    <p>And see this color applied to the <a target="_blank" href="/html/codes/color/color-tester.cfm?hexColor=ff8c00">Color Tester</a>.</p>
48
</div>
49
<div class="backgroundColor">
50
    <h1>Testing a background color of #ff8c00.</h1>
51
    <p>This has a background color of #ff8c00.</p>
52
    <p>Try changing the values to see how it affects the output.</p>
53
</div>
54
<div class="backgroundGradient">
55
    <h1>Testing a background gradient.</h1>
56
    <p>This has a background gradient going between white and #ff8c00.</p>
57
    <p>Try changing the values to see how it affects the output.</p>
58
</div>
59
​
60
<div class="lighterColor">
61
    <p>Lighter color: #FFAE4C</p>
62
</div>
63
<div class="darkerColor">
64
    <p>Darker color: #B26200</p>
65
</div>