- ID de l'analyse :
- 32b3f903-2433-4f7e-a7dd-3e5c8f9a215eTerminée
- URL soumise :
- https://colorify.rocks/color/6ca3b7
- Fin du rapport :
Liens : 0 trouvé(s)
Liens sortants identifiés à partir de la page
Variables JavaScript : 19 trouvée(s)
Les variables JavaScript globales chargées dans l'objet fenêtre d'une page sont des variables déclarées en dehors des fonctions et accessibles depuis n'importe quel endroit du code au sein du champ d'application actuel
| Nom | Type |
|---|---|
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| __cfQR | object |
| __cfBeacon | object |
| Livewire | object |
| Alpine | object |
| gtag | function |
| dataLayer | object |
| growMe | function |
Messages de journal de console : 11 trouvé(s)
Messages consignés dans la console web
| Type | Catégorie | Enregistrement |
|---|---|---|
| warning | javascript |
|
| warning | javascript |
|
| warning | javascript |
|
| warning | javascript |
|
| warning | other |
|
| warning | javascript |
|
| warning | javascript |
|
| warning | javascript |
|
| warning | javascript |
|
| warning | javascript |
|
| warning | other |
|
HTML
Le corps HTML de la page en données brutes
<!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>