<style> /* ===== CSS Reset & Base ===== */<br /> .cmto-wrapper * {<br /> margin: 0;<br /> padding: 0;<br /> box-sizing: border-box;<br /> }<br /> .cmto-wrapper {<br /> --cmto-primary: #4150F6;<br /> --cmto-primary-light: #6B77F8;<br /> --cmto-primary-dark: #2E3CD4;<br /> --cmto-bg: #F8F9FC;<br /> --cmto-card: #FFFFFF;<br /> --cmto-border: #E2E6EF;<br /> --cmto-text: #1A1F36;<br /> --cmto-text-muted: #6B7280;<br /> --cmto-success: #10B981;<br /> --cmto-danger: #EF4444;<br /> --cmto-shadow: 0 4px 20px rgba(65, 80, 246, 0.08);<br /> --cmto-shadow-hover: 0 8px 30px rgba(65, 80, 246, 0.15);<br /> --cmto-radius: 12px;<br /> --cmto-radius-sm: 8px;<br /> --cmto-transition: all 0.2s ease;<br /> font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;<br /> max-width: 1280px;<br /> margin: 0 auto;<br /> padding: 24px 20px;<br /> background: var(--cmto-bg);<br /> color: var(--cmto-text);<br /> line-height: 1.5;<br /> }<br /> /* ===== Header ===== */<br /> .cmto-header {<br /> text-align: center;<br /> margin-bottom: 24px;<br /> }<br /> .cmto-title {<br /> font-size: clamp(20px, 4vw, 28px);<br /> font-weight: 700;<br /> color: var(--cmto-text);<br /> margin-bottom: 16px;<br /> letter-spacing: -0.02em;<br /> }<br /> .cmto-actions {<br /> display: flex;<br /> justify-content: center;<br /> gap: 10px;<br /> flex-wrap: wrap;<br /> margin-bottom: 16px;<br /> }<br /> .cmto-btn {<br /> display: inline-flex;<br /> align-items: center;<br /> gap: 6px;<br /> padding: 10px 18px;<br /> border: 1.5px solid var(--cmto-border);<br /> background: var(--cmto-card);<br /> border-radius: 50px;<br /> font-size: 14px;<br /> font-weight: 500;<br /> color: var(--cmto-text);<br /> cursor: pointer;<br /> transition: var(--cmto-transition);<br /> }<br /> .cmto-btn:hover {<br /> border-color: var(--cmto-primary);<br /> color: var(--cmto-primary);<br /> transform: translateY(-1px);<br /> box-shadow: var(--cmto-shadow);<br /> }<br /> .cmto-btn:active {<br /> transform: translateY(0);<br /> }<br /> .cmto-btn svg {<br /> width: 16px;<br /> height: 16px;<br /> }<br /> /* ===== Color Space Tabs ===== */<br /> .cmto-tabs {<br /> display: flex;<br /> justify-content: center;<br /> gap: 6px;<br /> flex-wrap: wrap;<br /> }<br /> .cmto-tab {<br /> padding: 8px 20px;<br /> border: none;<br /> background: transparent;<br /> border-radius: 50px;<br /> font-size: 14px;<br /> font-weight: 600;<br /> color: var(--cmto-text-muted);<br /> cursor: pointer;<br /> transition: var(--cmto-transition);<br /> }<br /> .cmto-tab:hover {<br /> color: var(--cmto-primary);<br /> background: rgba(65, 80, 246, 0.08);<br /> }<br /> .cmto-tab.cmto-active {<br /> background: var(--cmto-primary);<br /> color: white;<br /> }<br /> /* ===== Main Content ===== */<br /> .cmto-content {<br /> display: grid;<br /> grid-template-columns: 1fr 1.2fr;<br /> gap: 20px;<br /> margin-top: 20px;<br /> }<br /> @media (max-width: 768px) {<br /> .cmto-content {<br /> grid-template-columns: 1fr;<br /> }<br /> }<br /> /* ===== Cards ===== */<br /> .cmto-card {<br /> background: var(--cmto-card);<br /> border-radius: var(--cmto-radius);<br /> padding: 20px;<br /> box-shadow: var(--cmto-shadow);<br /> border: 1px solid var(--cmto-border);<br /> }<br /> .cmto-card-title {<br /> font-size: 16px;<br /> font-weight: 700;<br /> color: var(--cmto-text);<br /> margin-bottom: 16px;<br /> display: flex;<br /> align-items: center;<br /> gap: 8px;<br /> }<br /> .cmto-card-title::before {<br /> content: '';<br /> width: 4px;<br /> height: 18px;<br /> background: var(--cmto-primary);<br /> border-radius: 2px;<br /> }<br /> /* ===== Result Section ===== */<br /> .cmto-result-preview {<br /> width: 100%;<br /> height: 140px;<br /> border-radius: var(--cmto-radius-sm);<br /> position: relative;<br /> overflow: hidden;<br /> cursor: pointer;<br /> transition: var(--cmto-transition);<br /> }<br /> .cmto-result-preview:hover {<br /> transform: scale(1.01);<br /> box-shadow: var(--cmto-shadow-hover);<br /> }<br /> .cmto-result-hex {<br /> position: absolute;<br /> top: 12px;<br /> left: 12px;<br /> padding: 6px 12px;<br /> background: rgba(255, 255, 255, 0.95);<br /> border-radius: 6px;<br /> font-family: 'SF Mono', Monaco, monospace;<br /> font-size: 14px;<br /> font-weight: 600;<br /> color: var(--cmto-text);<br /> box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);<br /> color: black!important;<br /> }<br /> .cmto-copied-toast {<br /> position: absolute;<br /> top: 50%;<br /> left: 50%;<br /> transform: translate(-50%, -50%);<br /> padding: 8px 16px;<br /> background: rgba(0, 0, 0, 0.8);<br /> color: white;<br /> border-radius: 6px;<br /> font-size: 13px;<br /> font-weight: 500;<br /> opacity: 0;<br /> transition: opacity 0.2s ease;<br /> pointer-events: none;<br /> }<br /> .cmto-copied-toast.cmto-show {<br /> opacity: 1;<br /> }<br /> .cmto-ratio-bar {<br /> display: flex;<br /> height: 8px;<br /> border-radius: 4px;<br /> overflow: hidden;<br /> margin: 16px 0;<br /> }<br /> .cmto-ratio-segment {<br /> transition: flex 0.3s ease;<br /> }<br /> .cmto-color-values {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 16px;<br /> font-size: 13px;<br /> }<br /> .cmto-value-group {<br /> display: flex;<br /> align-items: center;<br /> gap: 6px;<br /> }<br /> .cmto-value-label {<br /> font-weight: 700;<br /> color: var(--cmto-text);<br /> }<br /> .cmto-value-data {<br /> color: var(--cmto-text-muted);<br /> font-family: 'SF Mono', Monaco, monospace;<br /> }<br /> /* ===== Inputs Section ===== */<br /> .cmto-inputs-grid {<br /> display: grid;<br /> grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));<br /> gap: 12px;<br /> }<br /> .cmto-color-input {<br /> background: var(--cmto-bg);<br /> border-radius: var(--cmto-radius-sm);<br /> padding: 12px;<br /> border: 1.5px solid var(--cmto-border);<br /> transition: var(--cmto-transition);<br /> }<br /> .cmto-color-input:hover {<br /> border-color: var(--cmto-primary-light);<br /> }<br /> .cmto-color-swatch {<br /> width: 100%;<br /> height: 80px;<br /> border-radius: 6px;<br /> cursor: pointer;<br /> position: relative;<br /> overflow: hidden;<br /> transition: var(--cmto-transition);<br /> }<br /> .cmto-color-swatch:hover {<br /> transform: scale(1.02);<br /> }<br /> .cmto-swatch-hex {<br /> position: absolute;<br /> top: 8px;<br /> left: 8px;<br /> padding: 4px 8px;<br /> background: rgba(255, 255, 255, 0.9);<br /> border-radius: 4px;<br /> font-family: 'SF Mono', Monaco, monospace;<br /> font-size: 12px;<br /> font-weight: 600;<br /> color: black !important;<br /> }<br /> .cmto-color-picker {<br /> position: absolute;<br /> inset: 0;<br /> opacity: 0;<br /> cursor: pointer;<br /> width: 100%;<br /> height: 100%;<br /> }<br /> .cmto-input-controls {<br /> display: flex;<br /> align-items: center;<br /> justify-content: space-between;<br /> margin-top: 10px;<br /> gap: 8px;<br /> }<br /> .cmto-weight-display {<br /> font-size: 14px;<br /> font-weight: 600;<br /> color: var(--cmto-text);<br /> min-width: 24px;<br /> text-align: center;<br /> }<br /> .cmto-weight-controls {<br /> display: flex;<br /> align-items: center;<br /> gap: 4px;<br /> }<br /> .cmto-weight-btn {<br /> width: 28px;<br /> height: 28px;<br /> border: 1.5px solid var(--cmto-border);<br /> background: var(--cmto-card);<br /> border-radius: 6px;<br /> font-size: 16px;<br /> font-weight: 600;<br /> color: var(--cmto-text);<br /> cursor: pointer;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> transition: var(--cmto-transition);<br /> }<br /> .cmto-weight-btn:hover {<br /> border-color: var(--cmto-primary);<br /> color: var(--cmto-primary);<br /> background: rgba(65, 80, 246, 0.05);<br /> }<br /> .cmto-delete-btn {<br /> width: 28px;<br /> height: 28px;<br /> border: none;<br /> background: transparent;<br /> color: var(--cmto-text-muted);<br /> cursor: pointer;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> border-radius: 6px;<br /> transition: var(--cmto-transition);<br /> }<br /> .cmto-delete-btn:hover {<br /> background: rgba(239, 68, 68, 0.1);<br /> color: var(--cmto-danger);<br /> }<br /> .cmto-delete-btn svg {<br /> width: 16px;<br /> height: 16px;<br /> }<br /> /* ===== Add Color Button ===== */<br /> .cmto-add-color {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> min-height: 130px;<br /> border: 2px dashed var(--cmto-primary);<br /> border-radius: var(--cmto-radius-sm);<br /> background: rgba(65, 80, 246, 0.03);<br /> cursor: pointer;<br /> transition: var(--cmto-transition);<br /> }<br /> .cmto-add-color:hover {<br /> background: rgba(65, 80, 246, 0.08);<br /> border-color: var(--cmto-primary-dark);<br /> }<br /> .cmto-add-icon {<br /> width: 40px;<br /> height: 40px;<br /> border-radius: 50%;<br /> background: var(--cmto-primary);<br /> color: white;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> font-size: 24px;<br /> font-weight: 300;<br /> transition: var(--cmto-transition);<br /> }<br /> .cmto-add-color:hover .cmto-add-icon {<br /> transform: scale(1.1);<br /> }<br /> /* ===== Tip ===== */<br /> .cmto-tip {<br /> margin-top: 16px;<br /> padding: 12px 16px;<br /> background: rgba(65, 80, 246, 0.06);<br /> border-radius: var(--cmto-radius-sm);<br /> border-left: 3px solid var(--cmto-primary);<br /> font-size: 13px;<br /> color: var(--cmto-text-muted);<br /> }<br /> .cmto-tip strong {<br /> color: var(--cmto-primary);<br /> }<br /> /* ===== Responsive ===== */<br /> @media (max-width: 480px) {<br /> .cmto-wrapper {<br /> padding: 16px 12px;<br /> }<br /> .cmto-btn {<br /> padding: 8px 14px;<br /> font-size: 13px;<br /> }<br /> .cmto-tab {<br /> padding: 6px 14px;<br /> font-size: 13px;<br /> }<br /> .cmto-card {<br /> padding: 16px;<br /> }<br /> .cmto-result-preview {<br /> height: 120px;<br /> }<br /> .cmto-color-swatch {<br /> height: 70px;<br /> }<br /> .cmto-inputs-grid {<br /> grid-template-columns: 1fr 1fr;<br /> }<br /> }<br /> /* ===== Animations ===== */<br /> @keyframes cmto-fadeIn {<br /> from { opacity: 0; transform: translateY(10px); }<br /> to { opacity: 1; transform: translateY(0); }<br /> }<br /> .cmto-color-input {<br /> animation: cmto-fadeIn 0.3s ease;<br /> }<br /> </style> <header> <h1>Color Mixer Online — Mix Colors Online</h1> <button id="cmtoRandom"> Random </button> <button id="cmtoReset"> Reset </button> <button id="cmtoShare"> Share </button> <button data-space="rgb">RGB</button> <button data-space="hsl">HSL</button> <button data-space="lab">LAB</button> <button data-space="lch">LCH</button> <button data-space="oklab">OKLab</button> </header> <section> <h2>Result</h2> #4150F6 Copied! RGB 65 80 246 HSL 235° 91% 61% </section><section> <h2>Inputs</h2> <!-- Color inputs will be inserted here --> <strong>Tip:</strong> Click colors to pick new ones. Adjust weights for proportions. </section>
