- 掃描 ID：
- 32b3f903-2433-4f7e-a7dd-3e5c8f9a215e已完成
- 已提交的 URL：
- https://colorify.rocks/color/6ca3b7
- 報告完成時間：
連結 · 找到 0 個
從頁面中識別的傳出連結
JavaScript 變數 · 找到 19 個
在頁面的視窗物件上載入的全域 JavaScript 變數是在函數外部宣告的變數，可從目前範圍內程式碼中的任何位置存取
| 名稱 | 類型 |
|---|---|
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| __cfQR | object |
| __cfBeacon | object |
| Livewire | object |
| Alpine | object |
| gtag | function |
| dataLayer | object |
| growMe | function |
主控台記錄訊息 · 找到 11 條
記錄到 Web 主控台的訊息
| 類型 | 類別 | 記錄 |
|---|---|---|
| warning | javascript |
|
| warning | javascript |
|
| warning | javascript |
|
| warning | javascript |
|
| warning | other |
|
| warning | javascript |
|
| warning | javascript |
|
| warning | javascript |
|
| warning | javascript |
|
| warning | javascript |
|
| 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="nVEYuU73i0bWhee0CYUBkdGgxXJ5OYVYCR8hyloN">
<link rel="canonical" href="https://colorify.rocks/color/6ca3b7">
<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>
Understanding #6CA3B7: Color Values, Schemes, and Accessibility | Colorify.rocks
</title>
<meta property="og:image" content="https://colorify.rocks/storage/hex/6ca3b7.webp">
<meta name="description" content="Explore color #6ca3b7 - Get detailed information including RGB, HSL, complementary colors, and more.">
<!-- 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-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12" x-data="colorPage">
<header class="mb-8">
<h1 class="text-4xl font-bold text-gray-900 flex items-center gap-3">
<span class="w-8 h-8 rounded-lg shadow-sm" style="background-color: #6ca3b7"></span>
#6CA3B7
</h1>
<p class="text-lg text-gray-600 mt-2">Cyan</p>
<p class="mt-4 text-gray-600 max-w-3xl">
The color #6CA3B7 is a cyan that can be used in various design contexts.
This color has RGB values of 108, 163, 183 and HSL values of
196°, 34%, 57%.
</p>
<!-- Jump Links -->
<nav class="mt-6 flex flex-wrap gap-4">
<a href="#color-values" class="text-blue-600 hover:text-blue-800">Color Values</a>
<a href="#color-composition" class="text-blue-600 hover:text-blue-800">Color Composition</a>
<a href="#contrast" class="text-blue-600 hover:text-blue-800">Contrast</a>
<a href="#color-schemes" class="text-blue-600 hover:text-blue-800">Color Schemes</a>
<a href="#shades-tints" class="text-blue-600 hover:text-blue-800">Shades & Tints</a>
<a href="#color-blindness" class="text-blue-600 hover:text-blue-800">Color Blindness</a>
</nav>
</header>
<!-- Color Information -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
<div id="color-values" class="bg-white rounded-xl shadow-lg p-6">
<h2 class="text-xl font-semibold mb-4">Color Values for #6CA3B7</h2>
<p class="text-gray-600 mb-6">
Below are the different color format representations for #6CA3B7.
You can click any value to copy it to your clipboard.
</p>
<div class="space-y-4">
<div class="flex justify-between items-center">
<span class="text-gray-600">HEX:</span>
<div class="flex items-center gap-2">
<code class="bg-gray-100 px-2 py-1 rounded cursor-pointer" @click="copyToClipboard('#6CA3B7')" x-text="'#6CA3B7'" x-data="{ copied: false }" @click.prevent="copied = true; setTimeout(() => copied = false, 1000)">#6CA3B7</code>
<span x-show="copied" class="text-sm text-green-600" style="display: none;">Copied!</span>
</div>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600">RGB:</span>
<div class="flex items-center gap-2">
<code class="bg-gray-100 px-2 py-1 rounded cursor-pointer" @click="copyToClipboard('rgb(108,163,183)')" x-text="'rgb(108,163,183)'" x-data="{ copied: false }" @click.prevent="copied = true; setTimeout(() => copied = false, 1000)">rgb(108,163,183)</code>
<span x-show="copied" class="text-sm text-green-600" style="display: none;">Copied!</span>
</div>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600">HSL:</span>
<div class="flex items-center gap-2">
<code class="bg-gray-100 px-2 py-1 rounded cursor-pointer" @click="copyToClipboard('hsl(196,34%,57%)')" x-text="'hsl(196,34%,57%)'" x-data="{ copied: false }" @click.prevent="copied = true; setTimeout(() => copied = false, 1000)">hsl(196,34%,57%)</code>
<span x-show="copied" class="text-sm text-green-600" style="display: none;">Copied!</span>
</div>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600">CMYK:</span>
<div class="flex items-center gap-2">
<code class="bg-gray-100 px-2 py-1 rounded cursor-pointer" @click="copyToClipboard('cmyk(41%, 11%, 0%, 28%)')" x-text="'cmyk(41%, 11%, 0%, 28%)'" x-data="{ copied: false }" @click.prevent="copied = true; setTimeout(() => copied = false, 1000)">cmyk(41%, 11%, 0%, 28%)</code>
<span x-show="copied" class="text-sm text-green-600" style="display: none;">Copied!</span>
</div>
</div>
</div>
</div>
<div id="color-composition" class="bg-white rounded-xl shadow-lg p-6">
<h2 class="text-xl font-semibold mb-4">Color Composition of #6CA3B7</h2>
<p class="text-gray-600 mb-6">
This visualization shows the RGB (Red, Green, Blue) composition of the color #6CA3B7.
Each bar represents the percentage of that primary color in the final mix.
</p>
<div class="space-y-4">
<div class="flex items-center gap-4">
<div class="w-24">Red: 42.4%</div>
<div class="flex-1 bg-gray-200 rounded-full h-2">
<div class="bg-red-500 h-2 rounded-full" style="width: 42.4%"></div>
</div>
</div>
<div class="flex items-center gap-4">
<div class="w-24">Green: 63.9%</div>
<div class="flex-1 bg-gray-200 rounded-full h-2">
<div class="bg-green-500 h-2 rounded-full" style="width: 63.9%"></div>
</div>
</div>
<div class="flex items-center gap-4">
<div class="w-24">Blue: 71.8%</div>
<div class="flex-1 bg-gray-200 rounded-full h-2">
<div class="bg-blue-500 h-2 rounded-full" style="width: 71.8%"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Contrast Section -->
<div id="contrast" class="mb-12">
<div class="bg-white rounded-xl shadow-lg p-6">
<h2 class="text-xl font-semibold mb-4">Contrast Analysis for #6CA3B7</h2>
<p class="text-gray-600 mb-6">
Testing this color against light and dark backgrounds to check accessibility standards and readability.
</p>
<div class="grid md:grid-cols-2 gap-8">
<!-- Light Background -->
<div>
<h3 class="font-medium mb-3">On Light Background (White #FFFFFF)</h3>
<div class="bg-white border rounded-lg p-4 mb-4">
<p style="color: #6ca3b7" class="text-lg font-medium">
Sample Text in #6CA3B7
</p>
</div>
<div class="space-y-2">
<div class="flex justify-between">
<span class="text-gray-600">Contrast Ratio:</span>
<span class="font-medium">4.5:1</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">WCAG AA:</span>
<span class="font-medium text-green-600">✓ Passes</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">WCAG AAA:</span>
<span class="font-medium text-red-600">✗ Fails</span>
</div>
</div>
</div>
<!-- Dark Background -->
<div>
<h3 class="font-medium mb-3">On Dark Background (Black #000000)</h3>
<div class="bg-black border rounded-lg p-4 mb-4">
<p style="color: #6ca3b7" class="text-lg font-medium">
Sample Text in #6CA3B7
</p>
</div>
<div class="space-y-2">
<div class="flex justify-between">
<span class="text-gray-600">Contrast Ratio:</span>
<span class="font-medium">3.8:1</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">WCAG AA:</span>
<span class="font-medium text-red-600">✗ Fails</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">WCAG AAA:</span>
<span class="font-medium text-red-600">✗ Fails</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Color Schemes -->
<div id="color-schemes" class="space-y-8">
<!-- Complementary Colors -->
<div class="bg-white rounded-xl shadow-lg p-6">
<h2 class="text-xl font-semibold mb-4">Complementary Colors for #6CA3B7</h2>
<p class="text-gray-600 mb-6">
Complementary colors are pairs of colors that are positioned opposite each other on the color wheel.
When used together, they create maximum contrast and visual impact.
</p>
<div class="flex gap-4">
<div class="flex-1">
<a href="https://colorify.rocks/color/6ca3b7" class="block group">
<div class="aspect-video rounded-lg shadow-sm mb-2 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #6ca3b7">
</div>
<code class="text-sm group-hover:text-blue-600">#6CA3B7</code>
</a>
</div>
<div class="flex-1">
<a href="https://colorify.rocks/color/b7806c" class="block group">
<div class="aspect-video rounded-lg shadow-sm mb-2 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #b7806c">
</div>
<code class="text-sm group-hover:text-blue-600">#B7806C</code>
</a>
</div>
</div>
</div>
<!-- Analogous Colors -->
<div class="bg-white rounded-xl shadow-lg p-6">
<h2 class="text-xl font-semibold mb-4">Analogous Colors for #6CA3B7</h2>
<p class="text-gray-600 mb-6">
Analogous colors are groups of three colors that are next to each other on the color wheel.
This color scheme creates a harmonious and cohesive look that's pleasing to the eye.
</p>
<div class="flex gap-4">
<div class="flex-1">
<a href="https://colorify.rocks/color/6cb7a5" class="block group">
<div class="aspect-video rounded-lg shadow-sm mb-2 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #6cb7a5">
</div>
<code class="text-sm group-hover:text-blue-600">#6CB7A5</code>
</a>
</div>
<div class="flex-1">
<a href="https://colorify.rocks/color/6ca3b7" class="block group">
<div class="aspect-video rounded-lg shadow-sm mb-2 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #6ca3b7">
</div>
<code class="text-sm group-hover:text-blue-600">#6CA3B7</code>
</a>
</div>
<div class="flex-1">
<a href="https://colorify.rocks/color/6c7db7" class="block group">
<div class="aspect-video rounded-lg shadow-sm mb-2 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #6c7db7">
</div>
<code class="text-sm group-hover:text-blue-600">#6C7DB7</code>
</a>
</div>
</div>
</div>
<!-- Triadic Colors -->
<div class="bg-white rounded-xl shadow-lg p-6">
<h2 class="text-xl font-semibold mb-4">Triadic Colors for #6CA3B7</h2>
<p class="text-gray-600 mb-6">
Triadic color schemes use three colors equally spaced around the color wheel.
This combination offers strong visual contrast while maintaining color harmony.
</p>
<div class="flex gap-4">
<div class="flex-1">
<a href="https://colorify.rocks/color/6ca3b7" class="block group">
<div class="aspect-video rounded-lg shadow-sm mb-2 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #6ca3b7">
</div>
<code class="text-sm group-hover:text-blue-600">#6CA3B7</code>
</a>
</div>
<div class="flex-1">
<a href="https://colorify.rocks/color/b76ca3" class="block group">
<div class="aspect-video rounded-lg shadow-sm mb-2 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #b76ca3">
</div>
<code class="text-sm group-hover:text-blue-600">#B76CA3</code>
</a>
</div>
<div class="flex-1">
<a href="https://colorify.rocks/color/a3b76c" class="block group">
<div class="aspect-video rounded-lg shadow-sm mb-2 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #a3b76c">
</div>
<code class="text-sm group-hover:text-blue-600">#A3B76C</code>
</a>
</div>
</div>
</div>
</div>
<!-- Shades and Tints -->
<div id="shades-tints" class="mt-8 space-y-8">
<div class="bg-white rounded-xl shadow-lg p-6">
<h2 class="text-xl font-semibold mb-4">Shades of #6CA3B7</h2>
<p class="text-gray-600 mb-6">
Shades are created by adding black to the original color.
This progression shows how #6CA3B7 darkens from left to right,
creating deeper variations of the original color.
</p>
<div class="flex rounded-lg overflow-hidden">
<a href="https://colorify.rocks/color/6ca3b7" class="flex-1 group relative">
<div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #6ca3b7">
</div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
#6CA3B7
</span>
</div>
</a>
<a href="https://colorify.rocks/color/6193a5" class="flex-1 group relative">
<div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #6193a5">
</div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
#6193A5
</span>
</div>
</a>
<a href="https://colorify.rocks/color/568292" class="flex-1 group relative">
<div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #568292">
</div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
#568292
</span>
</div>
</a>
<a href="https://colorify.rocks/color/4c7280" class="flex-1 group relative">
<div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #4c7280">
</div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
#4C7280
</span>
</div>
</a>
<a href="https://colorify.rocks/color/41626e" class="flex-1 group relative">
<div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #41626e">
</div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
#41626E
</span>
</div>
</a>
<a href="https://colorify.rocks/color/36525c" class="flex-1 group relative">
<div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #36525c">
</div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
#36525C
</span>
</div>
</a>
<a href="https://colorify.rocks/color/2b4149" class="flex-1 group relative">
<div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #2b4149">
</div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
#2B4149
</span>
</div>
</a>
<a href="https://colorify.rocks/color/203137" class="flex-1 group relative">
<div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #203137">
</div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
#203137
</span>
</div>
</a>
<a href="https://colorify.rocks/color/162125" class="flex-1 group relative">
<div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #162125">
</div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
#162125
</span>
</div>
</a>
<a href="https://colorify.rocks/color/0b1012" class="flex-1 group relative">
<div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #0b1012">
</div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
#0B1012
</span>
</div>
</a>
<a href="https://colorify.rocks/color/000000" class="flex-1 group relative">
<div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #000000">
</div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
#000000
</span>
</div>
</a>
</div>
</div>
<div class="bg-white rounded-xl shadow-lg p-6">
<h2 class="text-xl font-semibold mb-4">Tints of #6CA3B7</h2>
<p class="text-gray-600 mb-6">
Tints are created by adding white to the original color.
This progression shows how #6CA3B7 lightens from left to right,
creating softer variations of the original color.
</p>
<div class="flex rounded-lg overflow-hidden">
<a href="https://colorify.rocks/color/6ca3b7" class="flex-1 group relative">
<div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #6ca3b7">
</div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
#6CA3B7
</span>
</div>
</a>
<a href="https://colorify.rocks/color/7bacbe" class="flex-1 group relative">
<div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #7bacbe">
</div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
#7BACBE
</span>
</div>
</a>
<a href="https://colorify.rocks/color/89b5c5" class="flex-1 group relative">
<div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #89b5c5">
</div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
#89B5C5
</span>
</div>
</a>
<a href="https://colorify.rocks/color/98bfcd" class="flex-1 group relative">
<div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #98bfcd">
</div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
#98BFCD
</span>
</div>
</a>
<a href="https://colorify.rocks/color/a7c8d4" class="flex-1 group relative">
<div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #a7c8d4">
</div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
#A7C8D4
</span>
</div>
</a>
<a href="https://colorify.rocks/color/b6d1db" class="flex-1 group relative">
<div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #b6d1db">
</div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
#B6D1DB
</span>
</div>
</a>
<a href="https://colorify.rocks/color/c4dae2" class="flex-1 group relative">
<div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #c4dae2">
</div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
#C4DAE2
</span>
</div>
</a>
<a href="https://colorify.rocks/color/d3e3e9" class="flex-1 group relative">
<div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #d3e3e9">
</div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
#D3E3E9
</span>
</div>
</a>
<a href="https://colorify.rocks/color/e2edf1" class="flex-1 group relative">
<div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #e2edf1">
</div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
#E2EDF1
</span>
</div>
</a>
<a href="https://colorify.rocks/color/f0f6f8" class="flex-1 group relative">
<div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #f0f6f8">
</div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
#F0F6F8
</span>
</div>
</a>
<a href="https://colorify.rocks/color/ffffff" class="flex-1 group relative">
<div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #ffffff">
</div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
#FFFFFF
</span>
</div>
</a>
</div>
</div>
</div>
<!-- Color Blindness Simulation -->
<div id="color-blindness" class="mt-8 bg-white rounded-xl shadow-lg p-6">
<h2 class="text-xl font-semibold mb-4">Color Blindness Simulation for #6CA3B7</h2>
<p class="text-gray-600 mb-6">
These simulations show how people with different types of color blindness might perceive #6CA3B7.
This information is crucial for designing accessible and inclusive color schemes.
</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div>
<a href="https://colorify.rocks/color/8484b2" class="block group">
<div class="aspect-video rounded-lg shadow-sm mb-2 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #8484b2">
</div>
<p class="text-sm font-medium capitalize">protanopia</p>
<code class="text-xs group-hover:text-blue-600">#8484B2</code>
</a>
</div>
<div>
<a href="https://colorify.rocks/color/817db1" class="block group">
<div class="aspect-video rounded-lg shadow-sm mb-2 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #817db1">
</div>
<p class="text-sm font-medium capitalize">deuteranopia</p>
<code class="text-xs group-hover:text-blue-600">#817DB1</code>
</a>
</div>
<div>
<a href="https://colorify.rocks/color/6faeae" class="block group">
<div class="aspect-video rounded-lg shadow-sm mb-2 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #6faeae">
</div>
<p class="text-sm font-medium capitalize">tritanopia</p>
<code class="text-xs group-hover:text-blue-600">#6FAEAE</code>
</a>
</div>
<div>
<a href="https://colorify.rocks/color/959595" class="block group">
<div class="aspect-video rounded-lg shadow-sm mb-2 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #959595">
</div>
<p class="text-sm font-medium capitalize">achromatopsia</p>
<code class="text-xs group-hover:text-blue-600">#959595</code>
</a>
</div>
</div>
</div>
<!-- SEO Footer -->
<footer class="mt-12 text-sm text-gray-500">
<p class="mb-2">
The color #6CA3B7 is a cyan with RGB values of
108, 163, 183 and HSL values of
196°, 34%, 57%.
</p>
<p>
This color tool provides detailed information about #6CA3B7 including color conversions,
color schemes, and accessibility considerations for web and graphic design use.
</p>
</footer>
</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="nVEYuU73i0bWhee0CYUBkdGgxXJ5OYVYCR8hyloN" 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>
<script type="text/javascript">
document.addEventListener('alpine:init', () => {
Alpine.data('colorPage', () => ({
async copyToClipboard(text) {
try {
await navigator.clipboard.writeText(text);
console.log('Copied:', text);
} catch (err) {
console.error('Failed to copy:', err);
}
}
}));
});
</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":"8f1b0d2d8bcb2165","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>