Professional Color Mixer

Create perfect color combinations for your projects

50%

HEX:

RGB:

HSL:

Color Harmony

Discover harmonious color combinations

Complementary

Analogous

Triadic

CSS Snippets

Copy and use these styles in your projects

Gradient Background

Color Palette

Color Variables

CSS Examples

Ready-to-use CSS snippets for common elements

Centered Overlay Text

Hover me

.overlay-text {
    font-size: 12px;
    background: rgba(255, 255, 255, 0.9);
    padding: 2px 4px;
    border-radius: 3px;
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

Gradient Button

.gradient-button {
    background: linear-gradient(45deg, #2c3e50, #3498db);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s;
}

.gradient-button:hover {
    transform: translateY(-2px);
}

Card Shadow

.card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s;
}

.card:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

Image Hover Zoom

.image-zoom {
    overflow: hidden;
}

.image-zoom img {
    transition: transform 0.3s;
}

.image-zoom:hover img {
    transform: scale(1.1);
}

Glass Effect

Glassmorphism

.glass {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Animated Border

.animated-border {
    position: relative;
    border: 2px solid transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(45deg, #2c3e50, #3498db) border-box;
    animation: rotate 4s linear infinite;
}

@keyframes rotate {
    100% { background: linear-gradient(white, white) padding-box,
           linear-gradient(405deg, #2c3e50, #3498db) border-box; }
}

About ColorTools

Professional color mixing and palette generation tool for designers and developers. Create, explore, and export beautiful color combinations for your projects.