Here's a sample CSS snippet with various color-related styles you can test and adjust. It includes different text elements, buttons, links, and UI components:
```css
body {
color: #333333;
background-color: #f5f5f5;
}
h1, h2 {
color: #2c7be5;
}
p {
color: #4a4a4a;
line-height: 1.6;
}
a {
color: #e34c26;
text-decoration: none;
}
a:hover {
color: #cc3300;
}
.button {
background-color: #4CAF50;
color: white;
padding: 12px 24px;
border: none;
border-radius: 4px;
}
.button:hover {
background-color: #45a049;
}
.button:disabled {
background-color: #cccccc;
color: #666666;
}
input[type="text"],
input[type="email"] {[Expand Post]
color: #1a1a1a;
background: #ffffff;
border: 1px solid #dddddd;
}
input::placeholder {
color: #aaaaaa;
}
label {
color: #6c757d;
display: block;
margin-bottom: 8px;
}
.navbar {
background-color: #333333;
}
.nav-link {
color: #ffffff;
padding: 1rem;
}
.nav-link.active {
color: #ff9f00;
}
.alert-success {
color: #155724;
background-color: #d4edda;
border-color: #c3e6cb;
}
.alert-warning {
color: #856404;
background-color: #fff3cd;
border-color: #ffeeba;
}
.alert-error {
color: #721c24;
background-color: #f8d7da;
border-color: #f5c6cb;
}
.code-block {
background-color: #2b2b2b;
color: #ffffff;
padding: 12px;
border-radius: 4px;
}
.code-block span.keyword {
color: #ff7b00;
}
.icon {
color: #6c757d;
font-size: 1.5em;
}
.icon:hover {
color: #2c7be5;
}
::selection {
background: #4CAF50;
color: white;
}
footer {
color: #666666;
padding: 20px;
}
footer a {
color: inherit;
}
```