<ef-color-dialog id="d1" opened></ef-color-dialog>
<div class="dialog-container">
  <button onclick="openDialog()">Open Color Dialog</button>
</div>

function openDialog() {
  var dlg = document.getElementById('d1');
  dlg.opened = true;
}

.dialog-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 450px;
}

<ef-color-dialog id="d1" opened value="#9966ff"></ef-color-dialog>
<div class="dialog-container">
  <button onclick="openDialog()">Open Color Dialog</button>
</div>

function openDialog() {
  var dlg = document.getElementById('d1');
  dlg.opened = true;
}

.dialog-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 450px;
}

<ef-color-dialog id="d1" opened allow-nocolor></ef-color-dialog>
<div class="dialog-container">
  <button onclick="openDialog()">Open Color Dialog</button>
</div>

var d1 = document.getElementById('d1');

function openDialog() {
  var dlg = document.getElementById('d1');
  dlg.opened = true;
}

.dialog-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 450px;
}