strprfcrm/resources/views/partials/color.blade.php

<div class="row mb-3 align-items-center">
    <label for="{{ $name }}" class="col-form-label @if(!($right ?? null)) col-md-4 text-md-end @endif">
        {{ $title ?? '' }}
        @isset($required) <sup>*</sup> @endisset
    </label>
    <div class="@if(!($right ?? null)) col-md-8 @endif ">
        <div class="input-group">
            <input type="color" name="{{ $name }}" id="{{ $name }}" style="height: 32px"
                   class="form-control @error($name) is-invalid @enderror" @disabled($disabled ?? null) @required($required ?? null)
                   @isset($min) min="{{ $min }}" @endisset
                   @isset($max) max="{{ $max }}" @endisset
                   @isset($pattern) pattern="{{ $pattern }}" @endisset
                   placeholder="{{ $placeholder ?? ''}}"
                   @isset($multiple) multiple="multiple" @endisset
                   value="{{ old($name, $value ?? '') }}" autocomplete="{{ $name }}">
            <button class="btn btn-sm btn-outline-info" type="button" id="change-color">Рандомный цвет</button>
        </div>



        @error($name)
        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
        @enderror
    </div>
</div>

@push('scripts')
    <script type="module">
        $('#bg_color').on('change input', function (){
            $('.avatars-select label:not(.disabled) img').css('background-color', $(this).val());
        });

        $('#change-color').on('click', function (){
            let h = Math.random() * 360;
            let s = (Math.random() * 20) + 70;
            let l = (Math.random() * 20) + 70;
            let color = hslToHex(h, s, l);
            $('#bg_color').val(color).trigger('change');
        });


        function hslToHex(h, s, l) {
            l /= 100;
            const a = s * Math.min(l, 1 - l) / 100;
            const f = n => {
                const k = (n + h / 30) % 12;
                const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
                return Math.round(255 * color).toString(16).padStart(2, '0');   // convert to Hex and prefix "0" if needed
            };
            return `#${f(0)}${f(8)}${f(4)}`;
        }

    </script>
@endpush