<div class="wrapper"> <div class="color-picker" name="color"> <div class="color-indicator" name="color"></div> </div> <div class="preview"></div> <div class="hue palette" name="hue"> <div class="slider" name="hue"></div> </div> <div class="alpha palette" name="alpha"> <div class="slider" name="alpha"></div> </div> <h5 class="hex result">#fff</h5> <h5 class="rgb result">rgba(255, 255, 255, 1)</h5> <h5 class="hsl result">hsla(0, 0%, 100%, 1)</h5> </div> <div class="target">Change my color pls!</div>
@import url(https://fonts.googleapis.com/css?family=Quicksand); html, body { margin: 0; box-sizing: border-box; } body { background-color: #333; font-family: 'Quicksand', sans-serif; padding-top: 20px; } .wrapper { position: relative; background: white; margin: 0 auto; width: 200px; height: 265px; border-radius: 3px; border: 1px solid #666; } .wrapper::after { content: ''; position: absolute; width: 10px; height: 10px; top: 260px; left: 94px; background: linear-gradient(135deg, transparent 50%, white 50%); border-width: 1px 1px 0 0 inherit solid; transform: rotate(45deg); } .color-picker { width: 200px; height: 120px; margin-bottom: 15px; border-radius: inherit; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)), linear-gradient(to left, rgba(0, 0, 0, 0), rgba(255, 255, 255, 1)); background-color: red; overflow: hidden; } .color-indicator { width: 12px; height: 12px; transform: translate(-12px, -12px); border-radius: 50%; border: 1px solid white; } .preview { background: linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0) 0 0 / 12px 12px, linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0) 6px 6px / 12px 12px; background-color: rgba(255,0,0,0.5); float: left; width: 32px; height: 32px; border-radius: 50%; margin-left: 12px; border: 1px solid #eee; } .palette { background: darkblue; width: 120px; height: 12px; margin-left: 60px; position: relative; border-radius: 1px; margin-bottom: 10px; } .hue { background: linear-gradient(to left, hsl(0, 100%, 50%) 0%, hsl(30, 100%, 50%) 8.33%, hsl(60, 100%, 50%) 16.67%, hsl(90, 100%, 50%) 25%, hsl(120, 100%, 50%) 33.33%, hsl(150, 100%, 50%) 41.67%, hsl(180, 100%, 50%) 50%, hsl(210, 100%, 50%) 58.33%, hsl(240, 100%, 50%) 66.67%, hsl(270, 100%, 50%) 75%, hsl(300, 100%, 50%) 83.33%, hsl(330, 100%, 50%) 91.67%, hsl(0, 100%, 50%) 100%); } .alpha { background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,255,1)) 0 0 / cover, linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0) 0 0 / 12px 12px, linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0) 6px 6px / 12px 12px; } .slider { width: 16px; height: 16px; border-radius: 50%; transform: translateX(120px); background: rgb(248, 248, 248); position: relative; left: -8px; top: -2px; filter: drop-shadow(2px 2px 3px rgba(0,0,0,.2)); } .result { color: #aaa; margin: 0; line-height: 2; text-align: center; user-select: auto; } .target { width: max-content; margin: 0 auto; padding-top: 10px; color: white; font-size: 24px; cursor: pointer; }