- スキャンID：
- d7730aca-b896-405c-8aae-c5f8cd5ed294終了
- 送信済みURL：
- https://colorify.rocks/
- レポート終了日：
リンク · 0件検出
ページから特定された発信リンク
JavaScript変数 · 19件検出
ページのウィンドウオブジェクトにロードされたグローバルのJavaScript変数は関数以外の場所で宣言された変数で、現在のスコープ内であればコードのどこからでもアクセス可能です
| 名前 | 規模 |
|---|---|
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| __cfQR | object |
| __cfBeacon | object |
| Livewire | object |
| Alpine | object |
| gtag | function |
| dataLayer | object |
| growMe | function |
コンソールログメッセージ · 2件検出
Webコンソールにログ記録されたメッセージ
| 規模 | 分類 | ログ |
|---|---|---|
| warning | other |
|
| warning | other |
|
HTML
未加工のHTMLページ本文
<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="B0rCjoMwcsaaQndKIBJusNvlOkLFluasVZBgYpdm">
<link rel="canonical" href="https://colorify.rocks">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<title>
AI Color Palette Generator - Colorify Rocks
</title>
<meta property="og:image" content="">
<meta name="description" content="Generate beautiful color palettes using AI. Find the perfect color combination for your next project with Colorify Rocks.">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet">
<!-- Scripts -->
<link rel="preload" as="style" href="https://colorify.rocks/build/assets/app-Dk4r2uyk.css"><link rel="modulepreload" href="https://colorify.rocks/build/assets/app-z-Rg4TxU.js"><link rel="stylesheet" href="https://colorify.rocks/build/assets/app-Dk4r2uyk.css" data-navigate-track="reload"><script type="text/javascript" src="https://faves.grow.me/main.js" defer="" data-grow-faves-site-id="U2l0ZTpiOTAzMWVjMi0yNDcyLTQ2MmItYWYyYS1jMDJkYjk1M2FlNjU="></script><script type="module" src="https://colorify.rocks/build/assets/app-z-Rg4TxU.js" data-navigate-track="reload"></script> <!-- Livewire Styles --><style>[wire\:loading][wire\:loading], [wire\:loading\.delay][wire\:loading\.delay], [wire\:loading\.inline-block][wire\:loading\.inline-block], [wire\:loading\.inline][wire\:loading\.inline], [wire\:loading\.block][wire\:loading\.block], [wire\:loading\.flex][wire\:loading\.flex], [wire\:loading\.table][wire\:loading\.table], [wire\:loading\.grid][wire\:loading\.grid], [wire\:loading\.inline-flex][wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.none][wire\:loading\.delay\.none], [wire\:loading\.delay\.shortest][wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter][wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short][wire\:loading\.delay\.short], [wire\:loading\.delay\.default][wire\:loading\.delay\.default], [wire\:loading\.delay\.long][wire\:loading\.delay\.long], [wire\:loading\.delay\.longer][wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest][wire\:loading\.delay\.longest] {display: none;}[wire\:offline][wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}:root {--livewire-progress-bar-color: #2299dd;}[x-cloak] {display: none !important;}</style>
<style>/* Make clicks pass-through */
#nprogress {
pointer-events: none;
}
#nprogress .bar {
background: var(--livewire-progress-bar-color, #29d);
position: fixed;
z-index: 1031;
top: 0;
left: 0;
width: 100%;
height: 2px;
}
/* Fancy blur effect */
#nprogress .peg {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px var(--livewire-progress-bar-color, #29d), 0 0 5px var(--livewire-progress-bar-color, #29d);
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
/* Remove these to get rid of the spinner */
#nprogress .spinner {
display: block;
position: fixed;
z-index: 1031;
top: 15px;
right: 15px;
}
#nprogress .spinner-icon {
width: 18px;
height: 18px;
box-sizing: border-box;
border: solid 2px transparent;
border-top-color: var(--livewire-progress-bar-color, #29d);
border-left-color: var(--livewire-progress-bar-color, #29d);
border-radius: 50%;
-webkit-animation: nprogress-spinner 400ms linear infinite;
animation: nprogress-spinner 400ms linear infinite;
}
.nprogress-custom-parent {
overflow: hidden;
position: relative;
}
.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
position: absolute;
}
@-webkit-keyframes nprogress-spinner {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style><script type="module" src="https://faves.grow.me/app.9.4.3.js" defer="" data-grow-script="widget" data-grow-me-beta-name="9.4.3" data-grow-me-beta-version="9.4.3" data-grow-faves-site-id="U2l0ZTpiOTAzMWVjMi0yNDcyLTQ2MmItYWYyYS1jMDJkYjk1M2FlNjU="></script></head>
<body class="font-sans antialiased">
<div class="min-h-screen bg-gray-100 flex flex-col">
<nav x-data="{ open: false }" class="bg-white border-b border-gray-100">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<!-- Logo -->
<div class="shrink-0 flex items-center">
<a href="https://colorify.rocks" class="font-bold text-xl">
Colorify Rocks
</a>
</div>
<!-- Navigation Links -->
<div class="hidden space-x-8 sm:ml-10 sm:flex">
<a href="https://colorify.rocks/discover" class="inline-flex items-center px-1 pt-1 text-sm font-medium text-gray-500 hover:text-gray-700">
Discover
</a>
<a href="https://colorify.rocks/glossary" class="inline-flex items-center px-1 pt-1 text-sm font-medium text-gray-500 hover:text-gray-700">
Glossary
</a>
</div>
</div>
<!-- Generate Button -->
<div class="hidden sm:flex sm:items-center sm:ml-6">
<a href="https://colorify.rocks" class="inline-flex items-center px-4 py-2 bg-blue-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-blue-700 focus:bg-blue-700 active:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition ease-in-out duration-150">
Generate Palette
</a>
</div>
<!-- Hamburger -->
<div class="-mr-2 flex items-center sm:hidden">
<button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
<path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile menu -->
<div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">
<div class="pt-2 pb-3 space-y-1">
<a href="https://colorify.rocks/discover" class="block pl-3 pr-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-50">
Discover
</a>
<a href="https://colorify.rocks/glossary" class="block pl-3 pr-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-50">
Glossary
</a>
<a href="https://colorify.rocks" class="block pl-3 pr-4 py-2 text-base font-medium text-blue-600 hover:text-blue-800 hover:bg-gray-50">
Generate Palette
</a>
</div>
</div>
</nav>
<!-- Page Content -->
<main class="flex-grow">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<!-- Hero Section -->
<div class="text-center mb-12">
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
AI Color Palette Generator
</h1>
<p class="text-xl text-gray-600 mb-6">
Create stunning color palettes instantly with AI. Enter any keyword or theme to generate the perfect color combination for your project.
</p>
<div class="inline-grid grid-cols-2 md:grid-cols-4 gap-4 text-left">
<div class="flex items-center space-x-2">
<svg class="w-5 h-5 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"></path>
</svg>
<span class="text-gray-700">AI-Powered</span>
</div>
<div class="flex items-center space-x-2">
<svg class="w-5 h-5 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"></path>
</svg>
<span class="text-gray-700">Instant Results</span>
</div>
<div class="flex items-center space-x-2">
<svg class="w-5 h-5 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"></path>
</svg>
<span class="text-gray-700">Free to Use</span>
</div>
<div class="flex items-center space-x-2">
<svg class="w-5 h-5 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"></path>
</svg>
<span class="text-gray-700">Export Ready</span>
</div>
</div>
</div>
<!-- Search Form -->
<div class="max-w-2xl mx-auto mb-16">
<form action="https://colorify.rocks/palette/generate" method="POST" class="space-y-4">
<input type="hidden" name="_token" value="B0rCjoMwcsaaQndKIBJusNvlOkLFluasVZBgYpdm" autocomplete="off"> <div class="relative">
<input type="text" name="prompt" class="w-full px-4 py-4 text-lg border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Try: modern startup, tropical sunset, winter forest..." value="">
<button type="button" class="absolute right-3 top-1/2 -translate-y-1/2 p-2 text-gray-400 hover:text-gray-600" onclick="if (!window.__cfRLUnblockHandlers) return false; this.closest('form').reset()">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path d="M4 4l16 16m0-16L4 20"></path>
</svg>
</button>
</div>
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-4 px-6 rounded-xl text-lg transition-colors">
Generate Color Palette
</button>
</form>
<div class="text-center text-sm text-gray-500 mt-4">
Trusted by thousands of designers and creators worldwide
</div>
</div>
<!-- Recent Palettes -->
<div class="space-y-6">
<div class="flex justify-between items-end mb-6">
<div>
<h2 class="text-2xl font-bold text-gray-900 mb-2">
Recent Color Palettes
</h2>
<p class="text-gray-600">Fresh color combinations created by our AI</p>
</div>
<a href="/discover" class="text-blue-600 hover:text-blue-700 font-medium">
View All →
</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<a href="https://colorify.rocks/palette/modern-waves" class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="flex h-32">
<div class="flex-1" style="background-color: #00aaff"></div>
<div class="flex-1" style="background-color: #5dd1e3"></div>
<div class="flex-1" style="background-color: #a4e7f2"></div>
<div class="flex-1" style="background-color: #f6f9fc"></div>
<div class="flex-1" style="background-color: #f8c58c"></div>
</div>
<div class="p-4">
<h3 class="font-medium text-gray-900 mb-2">
Modern Waves
</h3>
<div class="flex items-center space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
red
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
blue
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
gray
</span>
</div>
</div>
</a>
<a href="https://colorify.rocks/palette/healthy-nuts" class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="flex h-32">
<div class="flex-1" style="background-color: #a76e27"></div>
<div class="flex-1" style="background-color: #db8c36"></div>
<div class="flex-1" style="background-color: #f5c44c"></div>
<div class="flex-1" style="background-color: #f9e86b"></div>
<div class="flex-1" style="background-color: #b3d23f"></div>
</div>
<div class="p-4">
<h3 class="font-medium text-gray-900 mb-2">
Healthy Nuts
</h3>
<div class="flex items-center space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
brown
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
green
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
light
</span>
</div>
</div>
</a>
<a href="https://colorify.rocks/palette/healthy-brazil" class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="flex h-32">
<div class="flex-1" style="background-color: #4CAF50"></div>
<div class="flex-1" style="background-color: #8BC34A"></div>
<div class="flex-1" style="background-color: #FFC107"></div>
<div class="flex-1" style="background-color: #FF9800"></div>
<div class="flex-1" style="background-color: #FF5722"></div>
</div>
<div class="p-4">
<h3 class="font-medium text-gray-900 mb-2">
Healthy Brazil
</h3>
<div class="flex items-center space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
green
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
light
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
neutral
</span>
</div>
</div>
</a>
<a href="https://colorify.rocks/palette/modern-fashion" class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="flex h-32">
<div class="flex-1" style="background-color: #f0c5d5"></div>
<div class="flex-1" style="background-color: #f5a8a0"></div>
<div class="flex-1" style="background-color: #f5c45f"></div>
<div class="flex-1" style="background-color: #3fb0ac"></div>
<div class="flex-1" style="background-color: #2c3e50"></div>
</div>
<div class="p-4">
<h3 class="font-medium text-gray-900 mb-2">
Modern Fashion
</h3>
<div class="flex items-center space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
black
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
white
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
gray
</span>
</div>
</div>
</a>
<a href="https://colorify.rocks/palette/serene-minds" class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="flex h-32">
<div class="flex-1" style="background-color: #9db3c1"></div>
<div class="flex-1" style="background-color: #6ca3b7"></div>
<div class="flex-1" style="background-color: #3d8c8f"></div>
<div class="flex-1" style="background-color: #6d7f3d"></div>
<div class="flex-1" style="background-color: #b7c56c"></div>
</div>
<div class="p-4">
<h3 class="font-medium text-gray-900 mb-2">
Serene Minds
</h3>
<div class="flex items-center space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
blue
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
green
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
neutral
</span>
</div>
</div>
</a>
<a href="https://colorify.rocks/palette/mindful-serenity" class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="flex h-32">
<div class="flex-1" style="background-color: #2a9d8f"></div>
<div class="flex-1" style="background-color: #e9c46a"></div>
<div class="flex-1" style="background-color: #f6bd60"></div>
<div class="flex-1" style="background-color: #f3722c"></div>
<div class="flex-1" style="background-color: #d83333"></div>
</div>
<div class="p-4">
<h3 class="font-medium text-gray-900 mb-2">
Mindful Serenity
</h3>
<div class="flex items-center space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
blue
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
green
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
neutral
</span>
</div>
</div>
</a>
<a href="https://colorify.rocks/palette/traditional-christmas" class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="flex h-32">
<div class="flex-1" style="background-color: #A32D24"></div>
<div class="flex-1" style="background-color: #C87C6E"></div>
<div class="flex-1" style="background-color: #D4E4B0"></div>
<div class="flex-1" style="background-color: #3C7A5F"></div>
<div class="flex-1" style="background-color: #5C1D00"></div>
</div>
<div class="p-4">
<h3 class="font-medium text-gray-900 mb-2">
Traditional Christmas
</h3>
<div class="flex items-center space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
red
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
green
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
white
</span>
</div>
</div>
</a>
<a href="https://colorify.rocks/palette/vintage-christmas" class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="flex h-32">
<div class="flex-1" style="background-color: #9B3A3A"></div>
<div class="flex-1" style="background-color: #6B8C4B"></div>
<div class="flex-1" style="background-color: #D3B59B"></div>
<div class="flex-1" style="background-color: #C15A3A"></div>
<div class="flex-1" style="background-color: #5F2C3E"></div>
</div>
<div class="p-4">
<h3 class="font-medium text-gray-900 mb-2">
Vintage Christmas
</h3>
<div class="flex items-center space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
red
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
green
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
white
</span>
</div>
</div>
</a>
<a href="https://colorify.rocks/palette/vintage-nostalgic-christmas" class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="flex h-32">
<div class="flex-1" style="background-color: #A8433B"></div>
<div class="flex-1" style="background-color: #D95B2A"></div>
<div class="flex-1" style="background-color: #F6A06E"></div>
<div class="flex-1" style="background-color: #FCE5C2"></div>
<div class="flex-1" style="background-color: #5C7A90"></div>
</div>
<div class="p-4">
<h3 class="font-medium text-gray-900 mb-2">
Vintage Nostalgic Christmas
</h3>
<div class="flex items-center space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
red
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
green
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
white
</span>
</div>
</div>
</a>
<a href="https://colorify.rocks/palette/nostalgic-christmas" class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="flex h-32">
<div class="flex-1" style="background-color: #9b2226"></div>
<div class="flex-1" style="background-color: #ae3a3a"></div>
<div class="flex-1" style="background-color: #d57e7f"></div>
<div class="flex-1" style="background-color: #e0c097"></div>
<div class="flex-1" style="background-color: #f6f1d0"></div>
</div>
<div class="p-4">
<h3 class="font-medium text-gray-900 mb-2">
Nostalgic Christmas
</h3>
<div class="flex items-center space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
red
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
green
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
white
</span>
</div>
</div>
</a>
<a href="https://colorify.rocks/palette/slate-serenity" class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="flex h-32">
<div class="flex-1" style="background-color: #4B4F5A"></div>
<div class="flex-1" style="background-color: #6B738A"></div>
<div class="flex-1" style="background-color: #9BA8B6"></div>
<div class="flex-1" style="background-color: #D3D9E0"></div>
<div class="flex-1" style="background-color: #F3F4F7"></div>
</div>
<div class="p-4">
<h3 class="font-medium text-gray-900 mb-2">
Slate Serenity
</h3>
<div class="flex items-center space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
gray
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
black
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
dark
</span>
</div>
</div>
</a>
<a href="https://colorify.rocks/palette/twilight-mist" class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="flex h-32">
<div class="flex-1" style="background-color: #3F485E"></div>
<div class="flex-1" style="background-color: #4B4F5A"></div>
<div class="flex-1" style="background-color: #6B728E"></div>
<div class="flex-1" style="background-color: #A3B2C8"></div>
<div class="flex-1" style="background-color: #D7E1E8"></div>
</div>
<div class="p-4">
<h3 class="font-medium text-gray-900 mb-2">
Twilight Mist
</h3>
<div class="flex items-center space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
gray
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
black
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
dark
</span>
</div>
</div>
</a>
<a href="https://colorify.rocks/palette/green-fire" class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="flex h-32">
<div class="flex-1" style="background-color: #7fbf5a"></div>
<div class="flex-1" style="background-color: #5cc45c"></div>
<div class="flex-1" style="background-color: #3b9a31"></div>
<div class="flex-1" style="background-color: #f07c20"></div>
<div class="flex-1" style="background-color: #d35b20"></div>
</div>
<div class="p-4">
<h3 class="font-medium text-gray-900 mb-2">
Green Fire
</h3>
<div class="flex items-center space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
green
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
orange
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
fire
</span>
</div>
</div>
</a>
<a href="https://colorify.rocks/palette/driving-school" class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="flex h-32">
<div class="flex-1" style="background-color: #ffcc00"></div>
<div class="flex-1" style="background-color: #ffdd33"></div>
<div class="flex-1" style="background-color: #ffea66"></div>
<div class="flex-1" style="background-color: #f7f7b5"></div>
<div class="flex-1" style="background-color: #e3e3e3"></div>
</div>
<div class="p-4">
<h3 class="font-medium text-gray-900 mb-2">
Driving School
</h3>
<div class="flex items-center space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
blue
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
gray
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
warm
</span>
</div>
</div>
</a>
<a href="https://colorify.rocks/palette/forest-in-the-morning" class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="flex h-32">
<div class="flex-1" style="background-color: #2a4d2e"></div>
<div class="flex-1" style="background-color: #4b8f2e"></div>
<div class="flex-1" style="background-color: #77b300"></div>
<div class="flex-1" style="background-color: #d1e84f"></div>
<div class="flex-1" style="background-color: #f5e54d"></div>
</div>
<div class="p-4">
<h3 class="font-medium text-gray-900 mb-2">
Forest in the Morning
</h3>
<div class="flex items-center space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
green
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
brown
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
light
</span>
</div>
</div>
</a>
<a href="https://colorify.rocks/palette/golden-heritage" class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="flex h-32">
<div class="flex-1" style="background-color: #f0e68c"></div>
<div class="flex-1" style="background-color: #d9b342"></div>
<div class="flex-1" style="background-color: #b38922"></div>
<div class="flex-1" style="background-color: #7a6d2d"></div>
<div class="flex-1" style="background-color: #4f4f4f"></div>
</div>
<div class="p-4">
<h3 class="font-medium text-gray-900 mb-2">
Golden Heritage
</h3>
<div class="flex items-center space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
gray
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
warm
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
neutral
</span>
</div>
</div>
</a>
<a href="https://colorify.rocks/palette/filial-piety-gift" class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="flex h-32">
<div class="flex-1" style="background-color: #f9d89f"></div>
<div class="flex-1" style="background-color: #f6b2a3"></div>
<div class="flex-1" style="background-color: #f47394"></div>
<div class="flex-1" style="background-color: #c24481"></div>
<div class="flex-1" style="background-color: #6a4b93"></div>
</div>
<div class="p-4">
<h3 class="font-medium text-gray-900 mb-2">
Filial Piety Gift
</h3>
<div class="flex items-center space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
red
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
green
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
blue
</span>
</div>
</div>
</a>
<a href="https://colorify.rocks/palette/golden-harmony" class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="flex h-32">
<div class="flex-1" style="background-color: #f9c74f"></div>
<div class="flex-1" style="background-color: #f9f9c1"></div>
<div class="flex-1" style="background-color: #f94144"></div>
<div class="flex-1" style="background-color: #f3722c"></div>
<div class="flex-1" style="background-color: #f8961e"></div>
</div>
<div class="p-4">
<h3 class="font-medium text-gray-900 mb-2">
Golden Harmony
</h3>
<div class="flex items-center space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
red
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
orange
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
yellow
</span>
</div>
</div>
</a>
<a href="https://colorify.rocks/palette/golden-age" class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="flex h-32">
<div class="flex-1" style="background-color: #d0a64c"></div>
<div class="flex-1" style="background-color: #f9c22e"></div>
<div class="flex-1" style="background-color: #f8b34e"></div>
<div class="flex-1" style="background-color: #fdd16d"></div>
<div class="flex-1" style="background-color: #c5b67e"></div>
</div>
<div class="p-4">
<h3 class="font-medium text-gray-900 mb-2">
Golden Age
</h3>
<div class="flex items-center space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
gray
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
light
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
warm
</span>
</div>
</div>
</a>
<a href="https://colorify.rocks/palette/chinese-flavors" class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="flex h-32">
<div class="flex-1" style="background-color: #d32f2f"></div>
<div class="flex-1" style="background-color: #f57c20"></div>
<div class="flex-1" style="background-color: #fbc02d"></div>
<div class="flex-1" style="background-color: #8bc34a"></div>
<div class="flex-1" style="background-color: #1976d2"></div>
</div>
<div class="p-4">
<h3 class="font-medium text-gray-900 mb-2">
Chinese Flavors
</h3>
<div class="flex items-center space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
red
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
yellow
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
green
</span>
</div>
</div>
</a>
<a href="https://colorify.rocks/palette/chinese-flavor" class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="flex h-32">
<div class="flex-1" style="background-color: #c95c4d"></div>
<div class="flex-1" style="background-color: #e29f4d"></div>
<div class="flex-1" style="background-color: #e4bb77"></div>
<div class="flex-1" style="background-color: #a4d4a2"></div>
<div class="flex-1" style="background-color: #4b9db5"></div>
</div>
<div class="p-4">
<h3 class="font-medium text-gray-900 mb-2">
Chinese Flavor
</h3>
<div class="flex items-center space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
red
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
green
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
yellow
</span>
</div>
</div>
</a>
<a href="https://colorify.rocks/palette/chinese-breeze" class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="flex h-32">
<div class="flex-1" style="background-color: #c1683c"></div>
<div class="flex-1" style="background-color: #d3a46a"></div>
<div class="flex-1" style="background-color: #f1e1a6"></div>
<div class="flex-1" style="background-color: #a7d4e8"></div>
<div class="flex-1" style="background-color: #68b3b2"></div>
</div>
<div class="p-4">
<h3 class="font-medium text-gray-900 mb-2">
Chinese Breeze
</h3>
<div class="flex items-center space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
red
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
green
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
black
</span>
</div>
</div>
</a>
<a href="https://colorify.rocks/palette/modern-mind" class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="flex h-32">
<div class="flex-1" style="background-color: #4A90E2"></div>
<div class="flex-1" style="background-color: #7FB3F5"></div>
<div class="flex-1" style="background-color: #A9D8E8"></div>
<div class="flex-1" style="background-color: #F1AB68"></div>
<div class="flex-1" style="background-color: #EAB8B2"></div>
</div>
<div class="p-4">
<h3 class="font-medium text-gray-900 mb-2">
Modern Mind
</h3>
<div class="flex items-center space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
modern
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
intelligent
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
philosophical
</span>
</div>
</div>
</a>
<a href="https://colorify.rocks/palette/sleek-modern-philosophy" class="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="flex h-32">
<div class="flex-1" style="background-color: #2c3e50"></div>
<div class="flex-1" style="background-color: #34495e"></div>
<div class="flex-1" style="background-color: #7f8c8d"></div>
<div class="flex-1" style="background-color: #e74c3c"></div>
<div class="flex-1" style="background-color: #ecf0f1"></div>
</div>
<div class="p-4">
<h3 class="font-medium text-gray-900 mb-2">
Sleek Modern Philosophy
</h3>
<div class="flex items-center space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
modern
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
philosophy
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
sleek
</span>
</div>
</div>
</a>
</div>
</div>
<!-- Features Section -->
<div class="mt-24 space-y-16">
<div class="grid md:grid-cols-2 gap-12">
<div>
<h2 class="text-3xl font-bold mb-6">Why Use Our AI Color Palette Generator?</h2>
<div class="space-y-4">
<div class="flex items-start space-x-4">
<div class="flex-shrink-0 mt-1">
<svg class="w-6 h-6 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
<path d="M5.5 13a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.977A4.5 4.5 0 1113.5 13H11V9.413l1.293 1.293a1 1 0 001.414-1.414l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13H5.5z"></path>
</svg>
</div>
<div>
<h3 class="font-semibold text-lg mb-2">Advanced AI Technology</h3>
<p class="text-gray-600">Our AI understands color theory, trends, and aesthetics to generate harmonious palettes that work perfectly together.</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="flex-shrink-0 mt-1">
<svg class="w-6 h-6 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
<path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"></path>
</svg>
</div>
<div>
<h3 class="font-semibold text-lg mb-2">Perfect for Any Project</h3>
<p class="text-gray-600">Whether you're designing a website, brand identity, or interior space, our AI generates contextually relevant color schemes.</p>
</div>
</div>
</div>
</div>
<div>
<h2 class="text-3xl font-bold mb-6">How to Use</h2>
<ol class="space-y-4 list-decimal list-inside text-gray-600">
<li>Enter descriptive keywords about your project or desired mood</li>
<li>Click "Generate Color Palette" to create your combination</li>
<li>Save, export, or copy the color codes for your project</li>
<li>Generate as many variations as you need</li>
</ol>
<div class="mt-8 p-4 bg-blue-50 rounded-lg">
<p class="text-sm text-blue-800">
<strong>Pro Tip:</strong> Try using specific descriptive words like "minimalist", "vibrant", "corporate", or "retro" for more targeted results.
</p>
</div>
</div>
</div>
</div>
<!-- Colors of the Day Section -->
<section class="py-16 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-900">Colors of the Day</h2>
<p class="mt-4 text-lg text-gray-600">Discover today's featured colors and their unique properties</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-6">
<a href="https://colorify.rocks/color/cb13f4" class="group relative aspect-square rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="absolute inset-0" style="background-color: #cb13f4"></div>
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-10 transition-all duration-200">
<div class="absolute bottom-0 left-0 right-0 p-4 bg-white bg-opacity-90 transform translate-y-full group-hover:translate-y-0 transition-transform duration-200">
<div class="font-mono text-sm text-gray-900">#cb13f4</div>
</div>
</div>
</a>
<a href="https://colorify.rocks/color/ea0971" class="group relative aspect-square rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="absolute inset-0" style="background-color: #ea0971"></div>
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-10 transition-all duration-200">
<div class="absolute bottom-0 left-0 right-0 p-4 bg-white bg-opacity-90 transform translate-y-full group-hover:translate-y-0 transition-transform duration-200">
<div class="font-mono text-sm text-gray-900">#ea0971</div>
</div>
</div>
</a>
<a href="https://colorify.rocks/color/2661ce" class="group relative aspect-square rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="absolute inset-0" style="background-color: #2661ce"></div>
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-10 transition-all duration-200">
<div class="absolute bottom-0 left-0 right-0 p-4 bg-white bg-opacity-90 transform translate-y-full group-hover:translate-y-0 transition-transform duration-200">
<div class="font-mono text-sm text-gray-900">#2661ce</div>
</div>
</div>
</a>
<a href="https://colorify.rocks/color/dc8bc1" class="group relative aspect-square rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="absolute inset-0" style="background-color: #dc8bc1"></div>
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-10 transition-all duration-200">
<div class="absolute bottom-0 left-0 right-0 p-4 bg-white bg-opacity-90 transform translate-y-full group-hover:translate-y-0 transition-transform duration-200">
<div class="font-mono text-sm text-gray-900">#dc8bc1</div>
</div>
</div>
</a>
<a href="https://colorify.rocks/color/eed219" class="group relative aspect-square rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="absolute inset-0" style="background-color: #eed219"></div>
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-10 transition-all duration-200">
<div class="absolute bottom-0 left-0 right-0 p-4 bg-white bg-opacity-90 transform translate-y-full group-hover:translate-y-0 transition-transform duration-200">
<div class="font-mono text-sm text-gray-900">#eed219</div>
</div>
</div>
</a>
<a href="https://colorify.rocks/color/2c533d" class="group relative aspect-square rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="absolute inset-0" style="background-color: #2c533d"></div>
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-10 transition-all duration-200">
<div class="absolute bottom-0 left-0 right-0 p-4 bg-white bg-opacity-90 transform translate-y-full group-hover:translate-y-0 transition-transform duration-200">
<div class="font-mono text-sm text-gray-900">#2c533d</div>
</div>
</div>
</a>
<a href="https://colorify.rocks/color/82e40b" class="group relative aspect-square rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="absolute inset-0" style="background-color: #82e40b"></div>
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-10 transition-all duration-200">
<div class="absolute bottom-0 left-0 right-0 p-4 bg-white bg-opacity-90 transform translate-y-full group-hover:translate-y-0 transition-transform duration-200">
<div class="font-mono text-sm text-gray-900">#82e40b</div>
</div>
</div>
</a>
<a href="https://colorify.rocks/color/1963fc" class="group relative aspect-square rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="absolute inset-0" style="background-color: #1963fc"></div>
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-10 transition-all duration-200">
<div class="absolute bottom-0 left-0 right-0 p-4 bg-white bg-opacity-90 transform translate-y-full group-hover:translate-y-0 transition-transform duration-200">
<div class="font-mono text-sm text-gray-900">#1963fc</div>
</div>
</div>
</a>
<a href="https://colorify.rocks/color/0baa13" class="group relative aspect-square rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="absolute inset-0" style="background-color: #0baa13"></div>
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-10 transition-all duration-200">
<div class="absolute bottom-0 left-0 right-0 p-4 bg-white bg-opacity-90 transform translate-y-full group-hover:translate-y-0 transition-transform duration-200">
<div class="font-mono text-sm text-gray-900">#0baa13</div>
</div>
</div>
</a>
<a href="https://colorify.rocks/color/ad4e89" class="group relative aspect-square rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="absolute inset-0" style="background-color: #ad4e89"></div>
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-10 transition-all duration-200">
<div class="absolute bottom-0 left-0 right-0 p-4 bg-white bg-opacity-90 transform translate-y-full group-hover:translate-y-0 transition-transform duration-200">
<div class="font-mono text-sm text-gray-900">#ad4e89</div>
</div>
</div>
</a>
<a href="https://colorify.rocks/color/fb1f84" class="group relative aspect-square rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="absolute inset-0" style="background-color: #fb1f84"></div>
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-10 transition-all duration-200">
<div class="absolute bottom-0 left-0 right-0 p-4 bg-white bg-opacity-90 transform translate-y-full group-hover:translate-y-0 transition-transform duration-200">
<div class="font-mono text-sm text-gray-900">#fb1f84</div>
</div>
</div>
</a>
<a href="https://colorify.rocks/color/a4dfab" class="group relative aspect-square rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="absolute inset-0" style="background-color: #a4dfab"></div>
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-10 transition-all duration-200">
<div class="absolute bottom-0 left-0 right-0 p-4 bg-white bg-opacity-90 transform translate-y-full group-hover:translate-y-0 transition-transform duration-200">
<div class="font-mono text-sm text-gray-900">#a4dfab</div>
</div>
</div>
</a>
<a href="https://colorify.rocks/color/ec7825" class="group relative aspect-square rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="absolute inset-0" style="background-color: #ec7825"></div>
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-10 transition-all duration-200">
<div class="absolute bottom-0 left-0 right-0 p-4 bg-white bg-opacity-90 transform translate-y-full group-hover:translate-y-0 transition-transform duration-200">
<div class="font-mono text-sm text-gray-900">#ec7825</div>
</div>
</div>
</a>
<a href="https://colorify.rocks/color/fd9683" class="group relative aspect-square rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="absolute inset-0" style="background-color: #fd9683"></div>
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-10 transition-all duration-200">
<div class="absolute bottom-0 left-0 right-0 p-4 bg-white bg-opacity-90 transform translate-y-full group-hover:translate-y-0 transition-transform duration-200">
<div class="font-mono text-sm text-gray-900">#fd9683</div>
</div>
</div>
</a>
<a href="https://colorify.rocks/color/adf9d9" class="group relative aspect-square rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="absolute inset-0" style="background-color: #adf9d9"></div>
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-10 transition-all duration-200">
<div class="absolute bottom-0 left-0 right-0 p-4 bg-white bg-opacity-90 transform translate-y-full group-hover:translate-y-0 transition-transform duration-200">
<div class="font-mono text-sm text-gray-900">#adf9d9</div>
</div>
</div>
</a>
<a href="https://colorify.rocks/color/8befd6" class="group relative aspect-square rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="absolute inset-0" style="background-color: #8befd6"></div>
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-10 transition-all duration-200">
<div class="absolute bottom-0 left-0 right-0 p-4 bg-white bg-opacity-90 transform translate-y-full group-hover:translate-y-0 transition-transform duration-200">
<div class="font-mono text-sm text-gray-900">#8befd6</div>
</div>
</div>
</a>
<a href="https://colorify.rocks/color/029677" class="group relative aspect-square rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="absolute inset-0" style="background-color: #029677"></div>
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-10 transition-all duration-200">
<div class="absolute bottom-0 left-0 right-0 p-4 bg-white bg-opacity-90 transform translate-y-full group-hover:translate-y-0 transition-transform duration-200">
<div class="font-mono text-sm text-gray-900">#029677</div>
</div>
</div>
</a>
<a href="https://colorify.rocks/color/fb59a9" class="group relative aspect-square rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="absolute inset-0" style="background-color: #fb59a9"></div>
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-10 transition-all duration-200">
<div class="absolute bottom-0 left-0 right-0 p-4 bg-white bg-opacity-90 transform translate-y-full group-hover:translate-y-0 transition-transform duration-200">
<div class="font-mono text-sm text-gray-900">#fb59a9</div>
</div>
</div>
</a>
<a href="https://colorify.rocks/color/8ddcd9" class="group relative aspect-square rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="absolute inset-0" style="background-color: #8ddcd9"></div>
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-10 transition-all duration-200">
<div class="absolute bottom-0 left-0 right-0 p-4 bg-white bg-opacity-90 transform translate-y-full group-hover:translate-y-0 transition-transform duration-200">
<div class="font-mono text-sm text-gray-900">#8ddcd9</div>
</div>
</div>
</a>
<a href="https://colorify.rocks/color/b08451" class="group relative aspect-square rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
<div class="absolute inset-0" style="background-color: #b08451"></div>
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-10 transition-all duration-200">
<div class="absolute bottom-0 left-0 right-0 p-4 bg-white bg-opacity-90 transform translate-y-full group-hover:translate-y-0 transition-transform duration-200">
<div class="font-mono text-sm text-gray-900">#b08451</div>
</div>
</div>
</a>
</div>
<div class="mt-12 grid md:grid-cols-3 gap-8">
<div class="bg-white rounded-lg p-6 shadow-sm">
<div class="text-2xl mb-4">🎨</div>
<h3 class="font-semibold text-lg mb-2">Daily Refresh</h3>
<p class="text-gray-600">Our featured colors update every day, giving you fresh inspiration for your projects.</p>
</div>
<div class="bg-white rounded-lg p-6 shadow-sm">
<div class="text-2xl mb-4">📊</div>
<h3 class="font-semibold text-lg mb-2">Detailed Information</h3>
<p class="text-gray-600">Click any color to explore its properties, combinations, and usage guidelines.</p>
</div>
<div class="bg-white rounded-lg p-6 shadow-sm">
<div class="text-2xl mb-4">💡</div>
<h3 class="font-semibold text-lg mb-2">Design Inspiration</h3>
<p class="text-gray-600">Use these colors as starting points for your next design project.</p>
</div>
</div>
</div>
</section>
</div>
</main>
<footer class="bg-gray-800 text-white py-8 mt-auto">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div>
<h3 class="text-xl font-bold mb-4">Colorify.rocks</h3>
<p class="text-gray-300">Your ultimate destination for color inspiration and tools.</p>
</div>
<div>
<h4 class="text-lg font-semibold mb-3">Quick Links</h4>
<ul class="space-y-2">
<li><a href="https://colorify.rocks" class="text-gray-300 hover:text-white">Home</a></li>
<li><a href="https://colorify.rocks/discover" class="text-gray-300 hover:text-white">Explore</a></li>
<li><a href="https://colorify.rocks/glossary" class="text-gray-300 hover:text-white">Glossary</a></li>
<li><a href="https://colorify.rocks/color-generator" class="text-gray-300 hover:text-white">Color Generator</a></li>
<li><a href="https://colorify.rocks/contrast-checker" class="text-gray-300 hover:text-white">Contrast Checker</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-3">Community</h4>
<ul class="space-y-2">
<li><a href="https://colorify.rocks/about" class="text-gray-300 hover:text-white">About us</a></li>
<li><a href="https://colorify.rocks/wall-of-love" class="text-gray-300 hover:text-white">Wall of Love</a></li>
<li><a href="https://colorify.rocks/the-podcast" class="text-gray-300 hover:text-white">The Podcast</a></li>
<li>
<a href="https://colorify.rocks/color/cb13f4" class="text-gray-300 hover:text-white">
Color of the Day
</a>
</li>
<li><a href="mailto:[email protected]" class="text-gray-300 hover:text-white">[email protected]</a></li>
</ul>
</div>
</div>
<div class="mt-8 pt-8 border-t border-gray-700 text-center text-gray-400">
<div class="flex justify-center space-x-4 mb-4">
<a href="https://colorify.rocks/terms" class="text-gray-300 hover:text-white">Terms of Service</a>
<a href="https://colorify.rocks/privacy" class="text-gray-300 hover:text-white">Privacy Policy</a>
</div>
<p>© 2024 Colorify.rocks. All rights reserved.</p>
</div>
</div>
</footer> </div>
<script src="/livewire/livewire.min.js?id=38dc8241" data-csrf="B0rCjoMwcsaaQndKIBJusNvlOkLFluasVZBgYpdm" data-update-uri="/livewire/update" data-navigate-once="true" type="text/javascript"></script>
<script defer="" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" type="text/javascript"></script>
<!-- Google tag (gtag.js) -->
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-3FVL32YBB3" type="text/javascript"></script>
<script type="text/javascript">
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-3FVL32YBB3');
</script>
<script data-grow-initializer="" type="text/javascript">!(function(){window.growMe||((window.growMe=function(e){window.growMe._.push(e);}),(window.growMe._=[]));var e=document.createElement("script");(e.type="text/javascript"),(e.src="https://faves.grow.me/main.js"),(e.defer=!0),e.setAttribute("data-grow-faves-site-id","U2l0ZTpiOTAzMWVjMi0yNDcyLTQ2MmItYWYyYS1jMDJkYjk1M2FlNjU=");var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t);})();</script>
<script defer="" src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon="{"rayId":"8f1b0409cd7d3851","version":"2024.10.5","r":1,"serverTiming":{"name":{"cfExtPri":true,"cfL4":true,"cfSpeedBrain":true,"cfCacheStatus":true}},"token":"67f3b35c9dfb4db6ba45fd93ad35aa3d","b":1}" crossorigin="anonymous"></script>
</body></html>