Toggle navigation
☰
Home
HTML
CSS
Scripting
Database
<!DOCTYPE html> <title>Color Example</title> <style> div { padding: 20px; margin: 20px; } .textColor { color: #ADFF2F; background-color: white; } .borderColor { border-width: 3px; border-style: solid; border-color: #ADFF2F; } .backgroundColor { background-color: #ADFF2F; color: white; } .backgroundGradient { background: linear-gradient(to bottom, white, #ADFF2F); color: white; } .lighterColor { background: #C5FF6D; } .darkerColor { background: #79B220; } .lighterColor > p, .darkerColor > p { color: black; background: white; padding: 3px; border-radius: 3px; display: inline-block; } </style> <div class="textColor borderColor"> <h1>Testing Text in #ADFF2F</h1> <p>This text has been styled with a color of #ADFF2F.</p> <p>The border is also uses #ADFF2F.</p> <p>Try changing the values to see how it affects the output.</p> <p>And see this color applied to the <a target="_blank" href="/html/codes/color/color-tester.cfm?hexColor=ADFF2F">Color Tester</a>.</p> </div> <div class="backgroundColor"> <h1>Testing a background color of #ADFF2F.</h1> <p>This has a background color of #ADFF2F.</p> <p>Try changing the values to see how it affects the output.</p> </div> <div class="backgroundGradient"> <h1>Testing a background gradient.</h1> <p>This has a background gradient going between white and #ADFF2F.</p> <p>Try changing the values to see how it affects the output.</p> </div> <div class="lighterColor"> <p>Lighter color: #C5FF6D</p> </div> <div class="darkerColor"> <p>Darker color: #79B220</p> </div>