Forms:

<form method="POST">
@csrf

{{-- Name --}}

<div class="row">
<div class="col-sm-6">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">brush</i>
</span>
<div class="form-group label-floating">
<label class="control-label">@lang('car_colors.form.name')
<small>(@lang('general.required'))</small></label>
<input id="name" name="name" type="text" class="form-control"
@inputValue($car_color['name'])
maxlength="40" required />
</div>
</div>
</div>
{{-- </div> --}}

{{-- Cor --}}

<div class="row">
<div class="col-sm-6">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">color_lens</i>
</span>
<div class="form-group label-floating">
<label class="control-label">@lang('car_colors.form.color')
<small>(@lang('general.required'))</small></label>
<input style="padding-left: 30px" name="value" id="field-
color" type="text"
class="form-control" @inputValue($car_color['value'])
length="7" required />

<span id="color-box"
@if ($car_color && $car_color['value'])
style="background-color: {{ $car_color['value'] }}" @endif></span>
<div id="color-container"></div>
</div>
</div>
</div>
</div>

<div class="row">
<div class="col-sm-12 pull-right text-right">
<button type='submit' class='btn btn-finish btn-fill btn-primary
btn-wd'
id="btn-save">@lang('general.save')</button>
</div>
</div>

</form>

<script type="text/javascript">
$(document).ready(function() {
 $('#field-color').colorpicker({
container: "#color-container",
customClass: 'colorpicker-2x',
// horizontal: true,
align: 'left',
sliders: {
saturation: {
maxLeft: 200,
maxTop: 200
},
hue: {
maxTop: 200
},
alpha: {
maxTop: 200
}
}
});

$("#field-color").on('changeColor', function(color) {
$("#color-box").css('background-color', $("#field-color").val());
});

$(".colorpicker-alpha").remove();
})

function validationMandatoryFields() {
let invalidField = '';

const color = $('#field-color').val();

const name = $('#name').val();

if (name.trim() === '') {

invalidField = 'Nome';
} else if (color.trim() === '') {
invalidField = 'Cor';
}

if (invalidField !== '') {

swal.fire({
title: 'Atenção',
text: 'Campo inválido: ' + invalidField,
icon: 'warning',
confirmButtonColor: '#3085d6',
confirmButtonText: 'OK'
});
return false;
} else {
return true;
}
}

$('#btn-save').on('click', function() {
if (!validationMandatoryFields()) {
return false;
}
});
</script>
<style type="text/css">
#color-box {
display: block;
height: 20px;
width: 20px;
position: absolute;
left: 2px;
top: 8px;
background-color: #333;
}

.colorpicker-2x .colorpicker-saturation {
width: 200px;
height: 200px;
}

.colorpicker-2x .colorpicker-hue,
.colorpicker-2x .colorpicker-alpha {
width: 30px;
height: 200px;
}

.colorpicker-2x .colorpicker-color,
.colorpicker-2x .colorpicker-color div {
height: 30px;
}
</style>

Create que chama o Forms:

@extends('template.default')

@section('title', __('car_colors.create.title'))
@section('icon', 'color_lens')
@section('back', route("car.colors.list"))

@section('content')
@include('car_colors.form')
@endsection

@section('script')
<script type="text/javascript">
</script>
@endsection

@section('style')
<style type="text/css">
#btn-save{ margin-top: 60px; }
</style>
@endsection

Controller:

public function Create(Request $request)

{
 $car_color = false;
$error = false;

dd($request->all());

if ($request->isMethod('post')) {
$response = API::put('cars/colors', $request->all());

$car_color = isset($response['data']) ? $response['data'] : [];

$car_color = array_merge($car_color, $request->all());

if ($response['status'] == 'success') {
return redirect()->route('car.colors.list')-
>withSuccess($response['message']);
}

if ($response['status'] == 'error') {
$error = $response['message'];
}
}

return view('car_colors.create')
->with('car_color', $car_color)
->with('error', $error);
}

Rota WEB:

Route::post('/cars/colors/create', ['uses' => 'CarColorsController@Create', 'as' =>

'car.colors.create.post']);